img { animation: spin 1s infinite linear; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
以上代码中,大家使用了CSS3动画的关键帧技术来实现图片的旋转效果。其中,animation属性用于指定图片旋转的动画,参数spin表示动画名称,1s表示动画持续时间,infinite表示动画无限循环,linear表示动画的运动轨迹为线性。同时,大家定义了一个@keyframes规则,用于描述动画从开始到结束的状态。在这个规则中,from表示动画的起始状态,transform属性为旋转效果,rotate表示按照角度来旋转,deg为角度单位;to表示动画的结束状态,360deg表示一周的旋转角度。
以上就是如何使用CSS3实现图片无限旋转的方法。如果你想要进一步优化旋转效果,可以尝试修改animation和@keyframes规则的参数,以达到你喜欢的效果。