css的圆环倒计时，左边的半圈显示不完整,尤其是苹果手机



<cover-view class="box">
          <cover-view class="left_box">
            <cover-view class="left_item"></cover-view>
          </cover-view>
          <cover-view class="right_box">
            <cover-view class="right_item"></cover-view>
          </cover-view>
          <cover-view class="mask"></cover-view>
        </cover-view>

.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: 0;

  width:100px;

  height:200px;

  overflow: hidden;

  z-index: 1;

}

.left_box{

  left: 0;

}

.right_box{

  right: 0;

}

.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;

  transform-origin: right center;

  transform-origin: right center;

  animation: loading_left 3s linear;

  background-color: deeppink;

}

.right_item{

  border-top-right-radius: 100px;

  border-bottom-right-radius: 100px;

  transform-origin: left center;

  transform-origin: left center;

 animation: loading_right 3s linear;

  background-color: cyan;

}

.mask{

  /* 遮住div多余的部分，呈现出线条的效果 */

  position: absolute;

  top: 15px;

  left: 15px;

  right: 15px;

  bottom: 15px;

  z-index: 2;

  border-radius: 50%;

  background-color: #fff;

}

@keyframes loading_left{

    0%{

        -webkit-transform: rotate(0deg);

    }

    50%{

        -webkit-transform: rotate(0deg);

    }

    100%{

        -webkit-transform: rotate(180deg);

    }

}

@keyframes loading_right{

    0%{

      -webkit-transform: rotate(0deg);

    }

    50%{

      -webkit-transform: rotate(180deg);

    }

    100%{

      -webkit-transform: rotate(180deg);

    }

}