TShopping

 找回密碼
 註冊
搜索
查看: 1026|回復: 1

[分享] CSS3中Transitions屬性的使用方法

[複製鏈接]
發表於 2013-3-2 20:11:05 | 顯示全部樓層 |閱讀模式
 
Push to Facebook Push to Plurk Push to Twitter 
在CSS 3中,Transitions功能通過將元素的某個屬性從一個屬性值在指定時間內平滑過渡到另一個屬性值來實現動畫功能。可通過transtions屬性來使用Transtions功能。
j1.png
transtions屬性的使用方法如下所示:
transtion:property duration timing-function其中property表示屬性進行平滑過渡,duraton表示在多長時間內完成屬性值的平滑過渡,tinming-function表示通過什麼方法來進行平滑過渡。
  1. div { width:120px; height:90px; background:blue; transition:background-color 2s linear; }
  2. div:hover { background:orange; }
複製代碼
上面的實例中,把div元素的藍色背景在2秒鐘之內平滑過渡到橙色背景。
當然還有另外一種使用Transitions功能的方法,就是將Transitions屬性中的參數分開來寫,例如下面的代碼:
  1. transtion-property:backgroud-color;
  2. transtion-duration:1s;
  3. tarnstion-timing-function:linear;
複製代碼
使用Transitions功能同時對於多個屬性值進行平滑過渡:
  1. div {
  2. height:90px; background:blue;
  3. width:120px;
  4. -moz-transition:background-color 1s linear,height 1s linear;
  5. }
  6. div:hover {
  7. background:orange;
  8. height:240px;
  9. }
複製代碼
上面的實例中,元素從背景為藍色、高度為120像素平滑過渡到背景為橙色,高度為240像素。
使用Transitions功能實現元素的移動與旋轉動畫:
  1. img {
  2. position:absolute;
  3. top:270px;
  4. left:10px;
  5. -moz-transform:rotate(0deg);
  6. -moz-transition:left 5s linear,-moz-transform 1s linear;
  7. }
  8. img:hover {
  9. left:230px;
  10. -moz-transform:rotate(15deg);
  11. }
複製代碼
上面的實例中,使定位圖片元素從距左邊距10像素、旋轉角度為0狀態平滑過渡到距左邊距230像素、旋轉15度。

 

臉書網友討論
發表於 2014-2-7 15:54:51 | 顯示全部樓層
看过必回,人品超好!












etsy baby

版主招募中

您需要登錄後才可以回帖 登錄 | 註冊 |

本版積分規則



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

GMT+8, 2016-12-4 03:46 , Processed in 0.065002 second(s), 24 queries .

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

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

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