CSS3的出现使我们可以创建动画,伟德官网下载地址纯CSS就可以实现一些比较复杂的网页动画特效,在许多网页中可取代动画图片、Flash 动画以及 JavaScript。
下面我们伟德官网下载地址css3实现一个简单的图片旋转动画,以方便了解css3的动画特性。
html
<div class="rotate_bg">
<img class="rotateImages" src="http://www.codetc.com/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);}
}
实现方法很简单,下面是实际效果展示