codetc - 网站开发技术 首页 资源 特效 查看内容

使用CSS3实现简单的旋转动画

2018-12-22 17:25| 发布者: CODETC| 查看: 50| 评论: 0

CSS3的出现使我们可以创建动画,使用纯CSS就可以实现一些比较复杂的网页动画特效,在许多网页中可取代动画图片、Flash 动画以及 JavaScript。 

下面我们使用css3实现一个简单的图片旋转动画,以方便了解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);}
}


实现方法很简单,下面是实际效果展示


文章来源 CODETC,欢迎分享,转载请注明地址: http://www.codetc.com/article-355-1.html

最新评论

 作为游客发表评论,请输入您的昵称

返回顶部