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