1、首先新建一个html空白文档，取名字叫做css3动画，保存一下。
2、然后写html结构，只需要一个div元素即可，class名字叫做img
3、设置其边框为不同的颜色，边框宽度设置成100px。
4、因为是圆环，所以我们用到了css3的圆角效果，设置圆角为50%，也就是border-radius:50%，看一下效果。
5、接下来就是关键的步骤了，也就是添加动画效果。输入以下代码
6、来看一下最后的效果，还是不错的。
写了例子，效果不是很好，仅供参考
<!DOCTYPE html><html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html charset=utf-8">
<title>IE浏览器CSS transform旋转属性的演示</title>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
<style type="text/css">
body { font-family: "Arial", sans-serif }
#example {
position: absolute
top: 100px
left: 100px
border: #09f solid 1px
font-weight: 900
color: #09f
display: block
width: 200px
height: 200px
text-align:center
line-height:200px
cursor:pointer
}
</style>
</head>
<body>
<div id="example">.</div>
<script type="text/javascript">
function rotate(percent, scale){
var radian = Math.PI * percent
var angle = 180 * percent
var scale = 0.8
var style = document.getElementById("example").style
var transform = "rotate("+ angle +"deg) scale("+ scale +")"
style.filter = "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',M11="+Math.cos(radian)*scale+",M12="+(Math.sin(radian) * -1)*scale+",M21="+Math.sin(radian)*scale+",M22="+Math.cos(radian)*scale+")"
style.MozTransform = transform
style.WebkitTransform = transform
style.OTransform = transform
style.Transform = transform
}
i=0.25
setInterval("rotate(i)i+=0.01", 10)
</script>
</body>
</html>
这个只用css不能完全实现，的配合js的定时器来完成，下面是代码：
<!DOCTYPE html><html>
<head>
<title>HTML5</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<style type="text/css">
img{width: 200px}
.div1{width: 200pxheight: 200pxborder:1px solid #000margin: 150px auto}
.animate1{
-webkit-animation: move1 2s infinite
}
.animate2{
-webkit-animation: move2 1s infinite
}
@-webkit-keyframes move1{
0%{
-webkit-transform:scale(1)
}
100%{
-webkit-transform:scale(1.5)
}
}
@-webkit-keyframes move2{
0%{
-webkit-transform: rotateZ(0deg) scale(1.5)
-webkit-transform:
}
100%{
-webkit-transform: rotateZ(360deg) scale(1.5)
}
}
</style>
</head>
<body>
<div class="div1 animate2"></div>
<script type="text/javascript">
window.onload=function(){
var oDiv=document.querySelector(".div1")
oDiv.className="div1 animate1"
setTimeout(function(){
oDiv.className="div1 animate2"
},2000)
}
</script>
</body>
</html>
原理是：当animate1执行完后，把这个class去掉，换成animate2。其中animate1的执行时间，刚好是js定时器的时间。
当然这里有个问题，js定时的时间不一定会非常的吻合css的动画时间，你可以根据情况作出适当的时间调整。
