CSS微动画 - 倒数计时，绘制圆饼图！

Q: 这个用Svg做吧？
A: 如果你的需求跟我这款一样，Css就可以画罗～

上一篇的时钟给小编这一篇的灵感！倒数计时的圆饼图自己做～网路上很多svg的范本，本篇以animation做出圆饼图的效果！！

样式先出来

本篇要画的只有一个圆！至於半圆的效果，以父层border-radius: 50%搭配overflow: hidden，这样子层的元素就算是方形的，也会因为父层的overflow: hidden被遮住。

<style>
  .container {
    position: relative;
    display: inline-block;
    width: 300px;
    height: 300px;
    background-color: BlanchedAlmond;
    border-radius: 50%;
    overflow: hidden;
  }
  .half-round {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50%;
    transform-origin: bottom;
    background: MediumTurquoise;
  }
</style>

<div class="container">
  <div class="half-round first"></div>
  <div class="half-round second"></div>
</div>

旋转半圆

将第一个半圆负的旋转90deg，第二个半圆正的旋转90deg，即可填满整个圆。

<style>
  .first {
    transform: rotate(-90deg);
  }
  .second {
    transform: rotate(90deg);
  }
</style>

动画效果来了！！

• 两个半圆的相同设定为：
  • animation-duration皆设置为10秒。
  • animation-fill-mode皆设置为forwards，这样动画演绎结束後，元素的样式会停留在动画的最後一个样子。

<style>
  .half-round {
    animation-duration: 10s;
    animation-fill-mode: forwards;
  }
</style>

• 第一个圆的动画设定为：
  • 动画的设定分为两部分。
  • animation-timing-function设置为steps(1, start)。由於这个值的设定，动画看起来就会跟之前认知到的animation效果看起来比较不一样！之後会有篇章特别说明。

<style>
  .first {
    animation-name: roundFirst;
    animation-timing-function: steps(1, start);
  }
  @keyframes roundFirst {
    0%, 50% {
      background: MediumTurquoise;
      left: 0;
      z-index: 0;
    }
    100% {
      background-color: BlanchedAlmond;
      left: 50%;
      z-index: 1;
    }
  }
</style>

前半段时间会显示第一张图的样式，後半段时间会显示第二张图样式
Mov转换Gif一直失败，无法显示正确的动画效果，以文字说明

• 第二个圆的动画设定就是流畅地绕一圈。

<style>
  .second {
    animation-timing-function: linear;
    animation-name: roundSecond;
  }
  @keyframes roundSecond {
    0% {
      transform: rotate(90deg);
    }
    100% {
      transform: rotate(450deg);
    }
  }
</style>

两个半圆结合在一起

其实到目前为止，希望的效果已经做完了！！如果想要再多一点变化，加上文字或是中间再遮上一个圆让倒数看起来是边框在倒数。本篇的例子不用svg，而是使用比较特别的animation-timing-function的steps，下一篇为大家特别说明罗！

如果有写错的地方，欢迎点评！ 会及时改进～
如果有更好的写法，欢迎指教！ 希望各位不吝赐教～
如果想看更多效果，欢迎敲碗！ 提供示意图小编写写看～
如果内容疑似侵权，拜托告知！ 内容皆为小编理解後原创～
如果对你有点帮助，拿去用吧！