TShopping

 找回密碼
 註冊
搜索
查看: 586|回復: 0

[教學] CSS3動畫之一:Transitions功能

[複製鏈接]
發表於 2013-3-2 20:16:13 | 顯示全部樓層 |閱讀模式
 
Push to Facebook Push to Plurk Push to Twitter 
  在頁面裡加入些動畫,可以是頁面更加生動活潑,使用CSS3的動畫功能,可以使頁面上的文字或圖像具有動畫功能。比如說背景色從一種顏色,平滑的過度到另一種顏色。CSS3中的動畫功能有兩種,Transitions和Animations。這兩種功能都可以通過改變CSS中的屬性值來產生動畫效果。本文簡單介紹一下Transitions功能的使用方法。
  到目前為止,支持CSS3中的Transitions功能的瀏覽器有:Firefox 4+ 、Opera 10+、Safari 3.1+、Chrome 8+等,transitions屬性的使用方法如下:
  transition: property duration timing-function
  但是,在書寫CSS代碼的時候,如果是Firefox瀏覽器,需要書寫成「-moz-transition」的形式; 如果是Opera瀏覽器,需要書寫成「-o-transition」的形式;如果是Safari或者Chrome瀏覽器,則寫成「-webkit-transition」的形式。
  前面說了,Transitions和Animations都是通過改變CSS中屬性的值來產生動畫效果的,所以,property表示需要改變的屬性,  duration表示在多長時間內完成動畫,也就是動畫執行的時間,timing-function表示通過神馬方法進行動畫。
  下面看一個例子來演示一下Transitions功能的動畫效果,頁面中一個div元素,背景色為黃色,用過hover屬性指定當鼠標指針停留在div元素上時背景色變為淺藍色,通過transition屬性指定:當鼠標指針移動到div元素上時,在1s鍾內div元素的背景色從黃色平滑過渡到淺藍色。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>Transitions功能用法</title>
  6. <style>
  7. div {
  8. background-color: #ff0;
  9. -webkit-transition: background-color 1s linear;
  10. -moz-transition: background-color 1s linear;
  11. -o-transition: background-color 1s linear;
  12. }
  13. div:hover {
  14. background-color: #0ff;
  15. }
  16. </style>
  17. </head>
  18. <body>
  19. <div>鼠標放上來,看我的背景色</div>
  20. </body>
  21. </html>
複製代碼


  可以看到,當鼠標移到div元素上時,背景色從黃色變綠色然後邊淺藍色,這樣的平滑過渡效果,在CSS2中一般可以用jQuery去實現。如今採用CSS3的Transitions功能就方便多了。
  還有一種用法,就是把transition的三個屬性分開寫,寫成: transition-proterty屬性, transition-duration屬性, transition-timing-function屬性。這三個屬性的指定方法與含義與transition屬性中的三個參數的含義及指定方法完全相同,是一樣的。代碼
  1. transition-property: background-color;
  2. transition-duration: 1s;
  3. transition-timing-function: linear;
複製代碼
  當然,針對不同的瀏覽器,前面要加上相應的前綴。在這兒就不一一寫出了。
剛才這個例子只是改變了一個屬性值,那麼Transitions功能可不可以同時改變多個屬性值呢?當然可以,why not?下面把剛才的例子稍微修改一下: 一個div元素,背景色為黃色,字體顏色為黑色,寬度為400px,通過hover屬性指定當鼠標指針停留在div元素上時背景色變為淺藍色,字體為白色,寬度 增加到500px。通過transition屬性指定當鼠標指針移到到div元素上時在1s鐘的時間內完成這幾個屬性值的變化即平滑過渡。
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>Transitions功能用法</title>
  6. <style>
  7. div {
  8. background-color: #ff0;
  9. color: #000;
  10. width: 400px;
  11. -webkit-transition: background-color 1s linear, color 1s linear, width 1s linear;
  12. -moz-transition: background-color 1s linear, color 1s linear, width 1s linear;
  13. -o-transition: background-color 1s linear, color 1s linear, width 1s linear;
  14. }
  15. div:hover {
  16. background-color: #0ff;
  17. color: #fff;
  18. width: 500px;
  19. }
  20. </style>
  21. </head>
  22. <body>
  23. <div>鼠標放上來,看我的背景色,文字顏色和寬度</div>
  24. </body>
  25. </html>
複製代碼



  和預計的一樣,背景色平滑 過渡的時候,文字顏色也在平滑過渡,而寬度也漸漸的從400px變為500px。比起以前直接hover是不是炫多了?
使用Transitions功能實現動畫的缺點是只能指定屬性的開始值與終點值,然後再這兩個屬性值之間實現平滑過渡,不能實現更為複雜的動畫效果,在CSS3中,除了Transitions功能外,還可以使用Animations功能實現動畫效果,它允許通過關鍵幀的指定在頁面上實現更為複雜的動畫效果。

 

臉書網友討論
您需要登錄後才可以回帖 登錄 | 註冊 |

本版積分規則



Archiver|手機版|小黑屋|免責聲明|TShopping

GMT+8, 2016-12-9 01:57 , Processed in 0.052062 second(s), 22 queries .

本論壇言論純屬發表者個人意見,與 TShopping綜合論壇 立場無關 如有意見侵犯了您的權益 請寫信聯絡我們。

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回復 返回頂部 返回列表