css图片从中心旋转 |css3 边框线条 不断动

.rotate{
-webkit-animation:rotate 2s linear infinite;
animation:rotate 2s linear infinite;
}
@-webkit-keyframes rotate{
from{
-webkit-transform:rotate(0deg);
transform:rotate(0deg);
}
to{
-webkit-transform:rotate(360deg);
transform:rotate(360deg);
}
}
@keyframes rotate{
from{
-webkit-transform:rotate(0deg);
transform:rotate(0deg);
}
to{
-webkit-transform:rotate(360deg);
transform:rotate(360deg);
}
}

上面这段CSS代码中的.rotate类定义了一个动画，这个动画名为rotate，持续时间为2秒，线性无限循环。

然后大家定义了两个@keyframes，分别对应webkit和标准浏览器。from和to分别对应动画的开始和结束状态，其中-webkit-transform:rotate和transform:rotate分别是CSS3的变换属性，用来实现旋转效果。

接下来，在需要使用这个动画的图片标签中添加rotate类即可：

ul css居中，css图片轮滑，留言板页面+css，css为啥不常用定位，css如何让盒子居中显示，云雾飘飘特效css3，css3 边框线条 不断动

这样图片就会从中心旋转起来了。