|
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
|
