正文
是的没错！没有前言了，我们直接上正文。
首先我们来画一个简单的圆
.pie {
width: 100px;
height: 100px;
margin: 50px auto;
border-radius: 50%;
background: yellowgreen;
}
接下来我们给它的一半设置为另一种颜色，即我们的百分比显示的时候要用到的颜色，在pie中添加这样一句话
background-image: linear-gradient(to right, transparent 50%, #653 0);
通常我们如果要实现百分比显示， 通常要用到另一个div来设置遮罩层。但是我们今天不用， 我们打算使用：：before，
.pie:before {
content: '';
display: block;
margin-left: 50%;
height: 100%;
border-radius: 0 100% 100% 0 / 50%;
background-color: inherit;
}
然后就实现了一个遮罩层
黑框部分就是我们用伪元素实现的遮罩层。至于为什么只遮一半部分，往下看。
接下来我们尝试让这个半圆旋转，已达到显示百分比的效果
首先我们把旋转的中心设置到圆心，然后设置旋转角度
即在之前代码中添加以下两行
.pie:before {
。。。
transform-origin: 0 50%;
transform: rotate(.1turn);
}
transform-origin设置旋转中心， transform:rotate设置旋转角度
接下来我们来实现一个倒计时，这时候我们需要用到animation动画效果
首先要旋转，我们给伪元素设置了background:inherit,让它继承父元素的背景色，那么为了在超过百分之五十的时候继续动画前进，我们就需要在这个时候改变它的背景色。如果说我们给旋转到180 度的时间为3s，那么背景要在3s之后变色。因此我们可以指定以下两个动画函数
@keyframes
spin {
to { transform: rotate(.5turn);}
}
@keyframes bg {
50% {
background: #653;
}
}
spin控制旋转， bg控制变色。
现在我们的代码变成
.pie:before {
content: '';
display: block;
margin-left: 50%;
height: 100%;
border-radius: 0 100% 100% 0 / 50%;
background-color: inherit;
transform-origin: 0 50%;
animation: spin 50s linear infinite,
bg 100s step-end infinite;
}
其余部分保持不变哦，记得。 这样我们就实现了一个完整的百分比 倒计时动画效果。
这里可以给大家延伸一下， animation-delay的一个妙用， 我们可以给它设置一个负值。在animation-delay中有这样一说
一个负的延时是合法的，它意味这动画会立即开始播放，并前进到延时值的绝对值处。
也就是动画跳过指定时间而从中间开始播放
所以我么可以改造我们的代码如下
.pie:before {
content: '';
display: block;
margin-left: 50%;
height: 100%;
border-radius: 0 100% 100% 0 / 50%;
background-color: inherit;
transform-origin: 0 50%;
animation: spin 50s linear infinite,
bg 100s step-end infinite;
animation-play-state: paused; /* 规定动画暂停或者播放 running 播放 paused 暂停*/
animation-delay: inherit; /* 规定动画延迟时间从父元素继承 */
}
这样我们可以通过给div元素pie添加延时已起到显示不同百分比的效果
如
<div class="pie" style="animation-delay: -20s;"></div>
<div class="pie" style="animation-delay: -60s;"></div>
我们只需要控制要显示多久的时间即可，剩余的颜色变化等一系列东西就可以由css来为我们完成，是不是很简洁很方便呢。（当然，这里如果要有数据变化就要和js交互了哈）
