CSS3圆环旋转效果

html结构：

<div class="demo"></div>

css结构：

.demo{
            width:250px;
            height:250px;
            border:100px solid red;
            border-left-color:blue;
            border-right-color:yellow;
            border-top-color:#04f105;
            margin:100px;
            border-radius: 50%;/*圆角*/
            -webkit-animation:circle 1s infinite linear; 
}
@-webkit-keyframes circle{
            0% {transform:rotate(0deg);}
            100% {transform:rotate(-360deg);}
}

 

转载于:https://www.cnblogs.com/happybread/p/6928801.html