簡單的css3旋轉動畫,結合js使用

讓一個div元素旋轉360度示例:

1.div的樣式結構:

div { margin : 50 px auto; width : 200 px; height : 200 px; background-color : pink; }

2.設定旋轉屬性的類名:

div .rotate {              transform : rotate( 360 deg);              transition : all 1 s; }

transition有四個屬性:

property: 規定應用過渡的 CSS 屬性的名稱。

duration: 定義過渡效果花費的時間。預設是 0,機關是s。

timing-function: 規定過渡效果的時間曲線。預設是 "ease"。勻速'linear',加速'ease-in',減速'ease-out',先快後慢'ease-in-out'。

delay: 規定過渡效果何時開始。預設是 0。機關s。

可以連寫: transition: property duration timing-function delay;

3.給div元素設定滑鼠移入時旋轉,也就是給它加上.rotate類名.滑鼠移出時移除類名

$( function () {

$( ' div '). mouseenter( function () { $( this). addClass( ' rotate '); }). mouseleave( function () { $( this). removeClass( ' rotate '); }) })