不知各位有沒有仔細研讀 淺談 CSS3 Transition 轉場動畫效果 的文章內容呢?如果沒有仔細研讀的話,請趕快回去複習一番!否則,會不知道接下來我要做什麼喔!?

接下來,要教各位利用 CSS3 Transition 來製作出網路上常見的滑動選單效果。各位可以點選下方的 Demo 連結來檢視一下效果的呈現!( 請各位還是要注意一下前篇提供給各位的各家瀏覽器支援度 )


此選單效果的製作觀念相當容易理解,只要稍微點一下大家就知道了!!

各位只要釐清兩種不同狀態即可,分別為一般狀態,如下圖左;當滑鼠滑入到連結區的狀態,如下圖右。

示意圖

聰明的各位是不是已經發現不同點了呢?

沒錯!!就是在滑入的狀態時,<a> 區塊的 margin-top 的屬性值設定為 -41 px。

接下來,我們就來看一下 CSS3 coding ( 如果以下的解說您看不懂,建議您要再多研習一下 CSS ,因為此範例只為 CSS3 Transition 來進行解說,Away 不會再講解基礎的 CSS 觀念)。

載入畫面時的一般狀態,其 CSS 設定如下:

.navi li a{
    display:block; color:#FFF;
    text-align:center;
    text-decoration:none;
    padding:5px;
    letter-spacing:.1em;
    text-shadow:0 0 3px #FFF;
    font:13px/1em Arial, Helvetica, sans-serif;
    transition:margin-top .5s ease-out;
    -moz-transition:margin-top .5s ease-out;
    -webkit-transition:margin-top .5s ease-out;
    -o-transition:margin-top .5s ease-out;
    -ms-transition:margin-top .5s ease-out;
}

各位可能不了解上圖的意義為何?請各位看下圖解說:

再來…加上擬類別的( :hover )狀態,並設定其屬性值即可完成。

.navi li a:hover{ margin-top:-41px;}

為什麼要用 CSS3 Transition 來製作轉場動畫呢?

其理由有三:

  1. 一般的網頁設計師並不會撰寫 Javascript 或 jQuery 語法時,再加上客戶要求或上級指示需要達成此種動畫效果,這樣一來,CSS3 Transition 便可以派上用場!
  2. 使用 CSS3 來撰寫動畫效果,無論是在螢幕上或行動裝置上,效能顯示都會比使用 jQuery 來得好!
  3. 可降低對伺服器的 Request 。