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

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

1.div的样式结构:

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

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

div.rotate {
            /* 旋转360度 */
transform: rotate(360deg);
            /* all表示所有属性,1s表示在一秒的时间完成动画 */
transition: all 1s;
}

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

阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页