HTML+CSS动画实现倒计时

最近想做一个倒计时的动画，来实现圆形时间动画倒计时特效

做之前自己的想法是，对像素点的位置用函数进行判断，然后将对应位置的颜色隐藏，但是这样很麻烦，而且自己不知道怎么用函数去实现圆环均匀消失这样的效果，百度一番大多使用一些比较繁琐的方法，但我发现有个博主的方法比较清新脱俗，遂实现并分享下

思路分析

是先将一个正方形分成两个区域

然后在两个区域里都放两个半圆（其实两个区域都有一个圆，只是每个圆都被隐藏了一半），并且设置为溢出隐藏（左半圆只能在左矩形显示，右半圆只能在右矩形显示）

所以，利用css动画旋转，右半圆旋转180°后，左半圆再旋转180°就能达到一次倒计时效果，你只需设置好动画完成的时间就行了，如下图的右半圆旋转90°的情况

具体实现过程

首先，做一个圆形进度条效果出来，这是动态的，不急我们可以先通过css设置盒子的圆角（50%）做一个如下的进度条

.circleprogress{
    width: 160px;
    height: 160px;
    border:20px solid red;
    border-radius: 50%;
}

完整的圆画好了，不完整的圆呢？这里利用transparent将border的left和bottom隐藏

.circleprogress{
    width: 160px;
    height: 160px;
    border:20px solid red;
    border-left:20px solid transparent;
    border-bottom:20px solid transparent;
    border-radius: 50%;
}

旋转动作由如下代码完成

transform: rotate(45deg)

.circleProgress{
    width: 160px;
    height: 160px;
    border:20px solid transparent;
    border-radius: 50%;
    position: absolute;
    top:0;
    -webkit-transform: rotate(45deg);
}

所以可以设置旋转自己想要的角度，可这样并不能达到我们的效果，那该该怎么做呢
先设置一个正方形区域

.circleProgress_wrapper{
    width: 200px;
    height: 200px;
    margin: 50px auto;
    position: relative;
    border:1px solid #ddd;
}

接下来我将在这个容器里再放两个矩形，每个矩形都占一半：

<div class="circleProgress_wrapper">
        <div class="wrapper right">
            <div class="circleProgress rightcircle"></div>
        </div>
        <div class="wrapper left">
            <div class="circleProgress leftcircle"></div>
        </div>
 </div

.wrapper{
    width: 100px;
    height: 200px;
    position: absolute;
    top:0;
    overflow: hidden;
}
.right{
    right:0;
}
.left{
    left:0;
}

.wrapper 的overflow:hidden设置溢出隐藏。当我们去旋转矩形里面的圆形的时候，溢出部分就被隐藏掉了，所以我们先画出左右半圆，然后让右半圆做旋转动画，左半圆不动，等到右半圆全部溢出时，再让左半圆旋转最后就能达到效果

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

参考博客：
http://www.jq22.com/jquery-info825
https://www.cnblogs.com/jr1993/p/4677921.html