纯CSS实现圆环渐变过渡加载动画

CSS3

linear-gradient

@keyframes

border-radius

IE10

box1 和 box2

box3

HTML:

<div class='box'>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>

CSS:

/*旋转动画*/
@keyframes moveover {
0%   {transform:rotate(0deg);}
100% {transform:rotate(360deg);}
}
.box{
position:relative;
width:100px;
height:100px;
/*整体旋转*/
animation:moveover 3s linear infinite;
}
.box1{
position:absolute;
width: 50px;
height: 100px;
border-radius:50px 0 0 50px;
/* 起始最深颜色为 #999，过渡到中间颜色为 #d0cfcf */
background: linear-gradient(#999, #d0cfcf);
background-color: red;
z-index:2;
}
.box2{
position:absolute;
width: 50px;
height: 100px;
border-radius:0 50px 50px 0;
left:50%;
/* 过渡到中间颜色为 #d0cfcf 最终末尾颜色为 #eee */
background: linear-gradient(#eee,#d0cfcf);
z-index:1;
}
.box3{
position:absolute;
width:92px;
height:92px;
top:4px;
left:4px;
border-radius:50%;
background-color: #fff;
z-index:2;
}