[分享]css3怎么让图片持续旋转

CSS3可以实现图片的持续旋转效果，可以让网页变得更加有趣和生动。下面我们就来具体了解一下如何实现这个效果。 img{ animation:rotate 5s linear infinite; /这...

CSS3可以实现图片的持续旋转效果，可以让网页变得更加有趣和生动。下面我们就来具体了解一下如何实现这个效果。

<style>
img{
    animation:rotate 5s linear infinite;  /*这里的5s表示旋转一次的时间，可以根据需求调整*/
    -webkit-animation:rotate 5s linear infinite;  /*兼容webkit内核浏览器*/
}
@keyframes rotate{
    from{
        transform:rotate(0deg); /*起始角度是0*/
    }
    to{
        transform:rotate(360deg); /*结束角度是360，即旋转一圈*/
    }
}
@-webkit-keyframes rotate{
    from{
        -webkit-transform:rotate(0deg); /*起始角度是0*/
    }
    to{
        -webkit-transform:rotate(360deg); /*结束角度是360，即旋转一圈*/
    }
}
</style>
<img src="图片路径" alt="图片描述"> 

在上面的代码中，我们使用了animation和@keyframes关键字来定义了一个名为rotate的动画。该动画从0度旋转到360度，持续时间为5秒，无限循环。同时，为了兼容webkit内核浏览器，我们也使用了-webkit-animation和@-webkit-keyframes关键字。

此外，在HTML代码中，我们使用了img标签来插入图片，同时为其指定了CSS样式：animation:rotate。这样就可以让这张图片不断地旋转了。

需要注意的是，该方法只能应用于单个图片，如果需要对多个图片都实现持续旋转效果，可以在CSS样式中用class或id选择器来指定图片。