1/首先我们新建一个html空白文档，取名字叫做css3动画，保存一下。


2/然后写html结构，我们只需要一个div元素即可，class名字叫做img。我们设置其边框为不同的颜色，边框宽度设置成100px。



3/因为是圆环，所以我们用到了css3的圆角效果，设置圆角为50%，也就是border-radius:50%，看一下效果。



4/接下来就是关键的步骤了，也就是添加动画效果。



5/因为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>

6/来看一下最后的效果，还是不错的。