最近在工作中需要做一个圆圈倒计时，刚开始的想法是做个纯数字的倒计时即可，可是需求觉得这个不太好看，想加个倒计时进度条。于是就有了接下来的分析过程...

我们知道CSS3可以很方便的画圆，圆环，然后在加上一个旋转动画不就可以实现了吗？

于是先把圆环画出来了

做到这里问题又来了，如何让红色的圆环一点一点的消失呢？此处一个圆环再怎么旋转终究是一个圆环，

此时觉得一个圆可能不够，何不在画一个白色的半圆再旋转呢？可是白色的半圆又如何一点一点的显示呢?貌似又回到了问题的起点。

我们知道overflow：hidden;可以让多余的部分隐藏，如果在配合两个半圆旋转不就可以实现了吗？

先画两个半圆试试

左半圆

右半圆

如果都顺时针旋转45度再刚刚好拼在一起就是一个完整的圆环

此时当我们再旋转的时候发现，圆环可以实现一点一点的消失了，但是当转过一个180度的时候这个半圆右出现了，此时我们可以用到前面的overflow:hidden;

CSS代码如下

.circleProgress_wrapper{    width: 160px;    height: 160px;    margin: 10px auto;    position: relative;}.wrapper{    width: 80px;    height: 160px;    position: absolute;    top:0;    overflow: hidden;}.right{    right:0;}.left{    left:0;}.circleProgress{    width: 160px;    height: 160px;    border:20px solid transparent;    border-radius: 50%;    position: absolute;    top:0;    /*transform: rotate(45deg);*/} .rightcircle{    border-top:20px solid red;    border-right:20px solid red;    right:0;    animation: circleProgressLoad_right 6s linear infinite;}.leftcircle{    border-bottom:20px solid red;    border-left:20px solid red;    left:0;    animation: circleProgressLoad_left 6s linear infinite;}

接下来用css3写个旋转动画即可

.rightcircle{    border-top:20px solid red;    border-right:20px solid red;    right:0;    animation: circleProgressLoad_right 6s linear infinite;}.leftcircle{    border-bottom:20px solid red;    border-left:20px solid red;    left:0;    animation: circleProgressLoad_left 6s linear infinite;}@keyframes circleProgressLoad_right{    0%{        transform: rotate(45deg);    }    50%,100%{        transform: rotate(225deg);    }}@keyframes circleProgressLoad_left{    0%,50%{        transform: rotate(45deg);    }    100%{        transform: rotate(225deg);    }}

完整的demo可以查看下面的实例

目前这里的倒计时动画是动画时间是6s，这里可以根据需要自行修改，这里的运行时间我在项目中是用js控制的，这样可以根据后台下发的时间值来倒计时，非常方便。