CSS3小动画实例

<title>CSS3 圆环Loading动画</title>
<style>

.divrote{
position:absolute;
background:url("one.jpg");
border-radius:128px;
/*animation-play-state: paused;*/
animation-play-state: running;
width:128px;
height:128px;
left:47px;
top:46px;
-webkit-animation-name:ball_moveG;
-webkit-animation-duration:5s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function:linear;
-moz-animation-name:ball_moveG;
-moz-animation-duration:5s;
-moz-animation-iteration-count:infinite;
-moz-animation-timing-function:linear;
-o-animation-name:ball_moveG;
-o-animation-duration:5s;
-o-animation-iteration-count:infinite;
-o-animation-timing-function:linear;
-ms-animation-name:ball_moveG;
-ms-animation-duration:5s;
-ms-animation-iteration-count:infinite;
-ms-animation-timing-function:linear;
}

@-webkit-keyframes ball_moveG{
0%{
-webkit-transform:rotate(0deg)}
100%{
-webkit-transform:rotate(360deg)}
}
@-moz-keyframes ball_moveG{
0%{
-moz-transform:rotate(0deg)}
100%{
-moz-transform:rotate(360deg)}
}
@-o-keyframes ball_moveG{
0%{
-o-transform:rotate(0deg)}
100%{
-o-transform:rotate(360deg)}
}
@-ms-keyframes ball_moveG{
0%{
-ms-transform:rotate(0deg)}
100%{
-ms-transform:rotate(360deg)}
}
</style>
<div class="divrote">
</div>