最近要实现一个长按两秒，然后显示圆环倒数进度条的动画。 不想找轮子，想自己写来试试。

原理

由一个白色和蓝色两个圈组成，选择白色为底色，即白色的圆在下面，蓝色圈分为两个半圆，分别运动到白色圈的上面。

1.如何画一个半圆环

（1）正方形画一半的边
方法不好用，一是border的分段出来有45度的旋转，二是元素余出大量空间，这一点导致我一直因为元素zindex的问题无法实现，因为这种实现方式形成了一个环，最上面的元素最后要藏在最下面的元素下（花了我一晚上的时间，脑壳都想破了也没想出来，最后参考别人用了第二种矩形的方法）。

  1. .box {
  2.   width: 200px;
  3.   height: 200px;
  4.   border-radius: 50%;
  5.   border: 2px solid red;
  6.   border-top-color: transparent;
  7.   border-right-color: transparent;
  8. }

image.png
（2）矩形border-radius设为短边，大小两个圆构成圆环。不能用border来画，否则是下图二的样子。

  1. .box {
  2.   width: 80px;
  3.   height: 160px;
  4.   border-top-left-radius: 80px;
  5.   border-top-right-radius: 0px;
  6.   border-bottom-right-radius: 0px;
  7.   border-bottom-left-radius: 80px;
  8. }

image.png image.png

2.如何让圆转圈

  1. 定义按照rotate行动
  2. 定义旋转中心transform-origin

3.如何让动画停在最后一帧

animation-fill-mode: forwards

4.伪类为什么会偏移

在父元素有border的时候，伪类元素会在border结束的地方开始绘制

附上源码

  1. <div class="loading">
  2.   <div class="left"></div>
  3.   <div class="right"></div>
  4.   <div class="progress"></div>
  5. </div>
  7. .loading .progress {
  8.   position: absolute;
  9.   width: 120px;
  10.   height: 120px;
  11.   background-color: #000;
  12.   border-radius: 50%;
  13.   left: 20px;
  14.   top: 20px;
  15.   line-height: 120px;
  16.   text-align: center;
  17. }
  18. .left,
  19. .right {
  20.   width: 80px;
  21.   height: 160px;
  22.   overflow: hidden;
  23.   position: relative;
  24.   float: left;
  25.   background-color: #fff;
  26. }
  27. .left {
  28.   border-radius: 80px 0 0 80px;
  29. }
  30. .right {
  31.   border-radius: 0 80px 80px 0;
  32. }
  34. .left:after,
  35. .right:after {
  36.   content: "";
  37.   position: absolute;
  38.   display: block;
  39.   width: 80px;
  40.   height: 160px;
  41.   border-radius: 80px 0 0 80px;
  42.   background-color: blue;
  43.   animation-duration: 2s;
  44.   animation-iteration-count: infinite;
  45.   animation-timing-function: linear;
  46. }
  47. .right:after {
  48.   content: "";
  49.   position: absolute;
  50.   display: block;
  51.   border-radius: 0 80px 80px 0;
  52. }
  53. .left:after {
  54.   transform-origin: right center;
  55.   animation-name: spin-left;
  56. }
  58. .right:after {
  59.   transform-origin: left center;
  60.   animation-name: spin-right;
  61. }
  63. @keyframes spin-right {
  64.   0 {
  65.     transform: rotate(0deg);
  66.   }
  67.   50% {
  68.     transform: rotate(180deg);
  69.   }
  70.   100% {
  71.     transform: rotate(180deg);
  72.   }
  73. }
  75. @keyframes spin-left {
  76.   0 {
  77.     transform: rotate(0deg);
  78.   }
  79.   50% {
  80.     transform: rotate(0deg);
  81.   }
  82.   100% {
  83.     transform: rotate(180deg);
  84.   }
  85. }

1.scss的keyframe写法
3.原理（究竟为什么能实现转圈后消失）