css3旋转动画

html

<div class="rotate_bg">
    <img class="rotateImages" src="images/01.png" />
</div>

css

.rotate_bg{ 
    width: 500px; 
    height: 500px; 
    background: #59d1b6; 
    margin: 200px auto; 
}
.rotate_bg img.rotateImages{
    -webkit-animation:myRotate 10s linear infinite;
    animation:myRotate 10s linear infinite;
}
@-webkit-keyframes myRotate{
    0%{ -webkit-transform: rotate(0deg);}
    50%{ -webkit-transform: rotate(180deg);}
    100%{ -webkit-transform: rotate(360deg);}
}
@keyframes myRotate{
    0%{ -webkit-transform: rotate(0deg);}
    50%{ -webkit-transform: rotate(180deg);}
    100%{ -webkit-transform: rotate(360deg);}
}
效果图
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容