简单的css3旋转动画,结合js使用

让一个div元素旋转360度示例:

1.div的样式结构:

div {

margin : 50 px auto;

width : 200 px;

height : 200 px;

background-color : pink;

}

2.设置旋转属性的类名:

div .rotate {

             /* 旋转360度 */

transform : rotate( 360 deg);

             /* all表示所有属性,1s表示在一秒的时间完成动画 */

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 ');

})

})