css3 实现动画效果,怎样使他无限循环动下去?

html-css058

css3 实现动画效果,怎样使他无限循环动下去?,第1张

鼠标悬停,图标会一直不停旋转。 

如果实现图标一直不停旋转,则需要使用animation动画。先制作动画的各个关键帧,然后在图标中运用这一动画。

具体操作如下:

<img src="图标.jpg" class='xuanzhuan' />

.xuanzhuan{animation:xz 1s linear infinite }

@keyframes xz{

from  {transform:rotate(0deg)}

to{transform:rotate(360deg)}

}infinite 旋转不限次数,也可以改成1,旋转一次