操作方法
首先我们新建一个html空白文档，取名字叫做css3动画，保存一下。
然后写html结构，我们只需要一个div元素即可，class名字叫做img。我们设置其边框为不同的颜色，边框宽度设置成100px。
因为是圆环，所以我们用到了css3的圆角效果，设置圆角为50%，也就是border-radius:50%，看一下效果。
接下来就是关键的步骤了，也就是添加动画效果。
因为css3动画需要现代比较高级的浏览器才行，所以小编用chrome浏览器来测试，所以加了-webkit前缀。 <style type="text/css"> .img{ width:200px; height:200px; border:100px solid green; border-left-color: red; border-right-color: black; border-top-color: yellow; margin:100px; border-radius:50%; -webkit-animation:circle 1s infinite linear;/*匀速 循环*/ } @-webkit-keyframes circle{ 0%{ transform:rotate(0deg); } 100%{ transform:rotate(-360deg); } } </style>
来看一下最后的效果，还是不错的。