如何只用CSS做倒计时效果

前言

此方法在react-native当中有bug。因为用到的属性在安卓手机上不支持。。。
下面我要说的很简单，当当当～～～

1. 画左边的圆

首先 要有这么一个想法，一个div包裹这一个div：
<div> <div> </div> </div>
父div他的宽度应该是子div宽度的一半。这样给子div一个border-radius给父div一个overflow:hidden
这样正好会是一个半圆。

2.画右半边的圆

又半边的圆同上述所说的。

3.两个半圆结合在一起

两个半圆结合在就是两个圆并排放，那么个这两个半圆 一个position：absolute。这样两个半圆浮动在文档流当中。就结合成一个圆。

4.将两个半圆隐藏掉

这一步因人而异。有些需求的倒计时 要求从没有到完整的一个圆的倒计时，而有的倒计时，要求从完整到0的一个倒计时过程。
如果是要求从0到完整的一个倒计时，那么我们此时需要把这个圆隐藏掉
我们可以通过transform隐藏掉。因为父级的宽度是子级宽度的一半，所以我们可以计算出，当子级的圆旋转180度的时候，整个圆就不见，全都会通过hidden英藏在外面。同理可得另一半边圆。

5.动画

这个动画就比较简单，那就是 一个从0-180度的一个动画。

在这里，我是借鉴了一篇博客给了我启发做这些。可以通过这些变换出很多的
同时，我的代码传到github