css实现圆形倒计时效果

实现思想：

1.最外层包裹内部的div1(.box)

2.内部左右两边div2(.left_box和.right_box)，宽度为div1的一半，通过overflow:hidden隐藏其内部的div

3.在左右两个div2中各有一个div3(.left_item和.right_item)，div3在div2中旋转，旋转超出div2后被隐藏实现倒计时的效果

4.遮罩div4(.mask),用来遮住中心部分，形成进度“条”的效果

css代码：

    .box{
      /* 最外层的盒子 */
      width:200px;
      height:200px;
      margin: 0 auto;
      position: relative;
      overflow: hidden;
      border-radius: 50%;
      background-color: pink;
    }
    .left_box,.right_box{
      /*
        左右两边用于 隐藏 旋转的div的盒子
        通过overflow来隐藏内部div旋转出去的部分
      */
      position: absolute;
      top:;
      width:100px;
      height:200px;
      overflow: hidden;
      z-index:;
    }
    .left_box{
      left:;
    }
    .right_box{
      right:;
    }
    .left_item,.right_item{
      /* 
       这是需要旋转的div(没有被mask遮盖展示出来的部分作为倒计时的线条)
       为了方便理解，下面用deeppink和cyan分别设置了左右两边div的颜色
      */
      width: 100px;
      height: 200px;
    }
    .left_item{
      /*
       1.设置圆角，圆角大小为高度的一半
       2.这只旋转的中心店，这是左边圆，中心点设置到右边中心点，右边圆则设置到左边中心点
       */
      border-top-left-radius: 100px;
      border-bottom-left-radius: 100px;
      -webkit-transform-origin: right center;
      transform-origin: right center;
      -webkit-animation: loading_left 3s linear;
      background-color: deeppink;
    }
    .right_item{
      border-top-right-radius: 100px;
      border-bottom-right-radius: 100px;
      -webkit-transform-origin: left center;
      transform-origin: left center;
      -webkit-animation: loading_right 3s linear;
      background-color: cyan;
    }
    .mask{
      /* 遮住div多余的部分，呈现出线条的效果 */
      position: absolute;
      top: 15px;
      left: 15px;
      right: 15px;
      bottom: 15px;
      z-index:;
      border-radius: 50%;
      background-color: #fff;
    }
    @-webkit-keyframes loading_left{
        0%{
            -webkit-transform: rotate(0deg);
        }
        50%{
            -webkit-transform: rotate(0deg);
        }
        100%{
            -webkit-transform: rotate(180deg);
        }
    }
    @-webkit-keyframes loading_right{
        0%{
          -webkit-transform: rotate(0deg);
        }
        50%{
          -webkit-transform: rotate(180deg);
        }
        100%{
          -webkit-transform: rotate(180deg);
        }
    }

html代码：

<div class="box">
   <div class="left_box">
     <div class="left_item"></div>
   </div>
   <div class="right_box">
     <div class="right_item"></div>
   </div>
   <div class="mask"></div>
 </div>