css3如何让图片实现不停旋转的效果-创新互联

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

创新互联公司是创新、创意、研发型一体的综合型网站建设公司，自成立以来公司不断探索创新，始终坚持为客户提供满意周到的服务，在本地打下了良好的口碑，在过去的10年时间我们累计服务了上千家以及全国政企客户，如成都木屋等企业单位，完善的项目管理流程，严格把控项目进度与质量监控加上过硬的技术实力获得客户的一致赞赏。

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如何让图片实现不停旋转的效果大概了解了吗？希望文章内容对大家有所帮助。如果想了解更多相关文章内容，欢迎关注创新互联网站制作公司行业资讯频道。

新闻名称：css3如何让图片实现不停旋转的效果-创新互联
链接URL：https://www.cdcxhl.com/article16/eejgg.html

成都网站建设公司_创新互联，为您提供虚拟主机、网页设计公司、企业建站、关键词优化、品牌网站设计、外贸建站

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联