css3如何让图片实现不停旋转的效果

css3如何让图片实现不停旋转的效果？这个问题可能是我们日常学习或工作经常见到的。希望通过这个问题能让你收获颇深。下面是小编给大家带来的参考内容，让我们一起来看看吧！

HTML代码示例如下：

<div class="demo">
    <img class="an img" src="/test/img/2.png" width="500" height="500"/>
</div>

css图片旋转360度的动画代码示例如下：

.demo{text-align: center;
    margin-top: 100px;}
@-webkit-keyframes rotation{
    from {-webkit-transform: rotate(0deg);}
    to {-webkit-transform: rotate(360deg);}
}
.an{
    -webkit-transform: rotate(360deg);
    animation: rotation 3s linear infinite;
    -moz-animation: rotation 3s linear infinite;
    -webkit-animation: rotation 3s linear infinite;
    -o-animation: rotation 3s linear infinite;
}
.img{border-radius: 250px;}

上述代码，可以直接复制粘贴在本地进行测试，那么通过浏览器访问，效果就如下图：

由于上传图片限制大小，所以压缩了gif截图，可能会导致图片无法旋转。但是正常情况下，是按照规定时间速度旋转的，我们这里就要注意到animation属性，这个属性是所有动画属性的简写属性。我们给img图片添加了transform和animation样式属性，使得图片实现360度旋转动画效果。

css动画图片自动旋转的效果实现方法，也就如上所述。只要掌握了css中的transform和animation属性就可以实现大多数动画效果。他们的原理基本都是大同小异。

感谢各位的阅读！看完上述内容，你们对css3如何让图片实现不停旋转的效果大概了解了吗？希望文章内容对大家有所帮助。如果想了解更多相关文章内容，欢迎关注亿速云行业资讯频道。