CSS实现图像旋转动态效果

CSS实现图像旋转动态效果

首先，应向需要设置旋转的div的css样式中添加如下代码：

例如向一个名为img01的类选择器添加旋转样式，在animation属性内设置，旋转动画，rotate为动画名（自定义的名称），6s为周期，linear为线性渐变（取消渐变效果），infinite为无限循环，即每轮动画结束后自动进入下一轮，实现无限旋转效果。

.img01{  
    display: block;
    animation: rotate 6s linear infinite;
}  

在类选择器重定义好后，则需再向css文件中添加如下样式代码：

rotate对应类选择其中自定义的动画名称。transform属性中设置了从0度旋转到360（顺时针），若要设置逆时针旋转，可将数值颠倒。

@keyframes rotate{
	0%{
		transform: rotateZ(0deg);/*从0度开始*/
	}
	100%{
		transform: rotateZ(360deg);/*360度结束*/
	}
}

正确添加以上代码后，就可实现自动无限旋转效果啦