前面我们已经做到了 0-50%的效果 ，50-100%的效果似乎没办法来做 ，这个是我们上一篇分享做出来的效果：
这个时候我们是可以吧50%-100% 单独拿出了考虑的，安装之前的思路 你做到50%-100% 的饼图效果，他显示的却是50%-0%的效果，那么我们反过来呢 ？一个棕色的伪元素，旋转从0-50%。所有60% ，覆盖层的伪元素应该是给他的一个棕色的背景色：
.pie::before {
content: '';
display: block;
margin-left: 50%;
height: 100%;
border-radius: 0 100% 100% 0 / 50%;
background: #655;
transform-origin: left;
transform: rotate(.1turn);}
现在思路以及基本出来了，可以描述任何百分比的方法。更好的我们可用css创建一个0-100% 的动画。
@keyframes spin {
to { transform: rotate(.5turn); }
}
@keyframes bg {
50% { background: #655; }
}
.pie::before {
content: '';
display: block;
margin-left: 50%;
height: 100%;
border-radius: 0 100% 100% 0 / 50%;
background-color: inherit;
transform-origin: left;
animation: spin 3s linear infinite,
bg 6s step-end infinite;
}
为了直观的显示效果 我加了一个 border 边框 ，下面的动态图可以详细的反应他的流程：
今天的分享就到这里吧，大家学习有难度吗？ 想学习更多 或者有点难度 可以加入我们的学习群 497187010 一起交流学习 哦！完美的 做法 我们下一篇继续讲，大家可以先尝试做做一下吧。同时也可以用svg 等 来做 ，尝试一下吧！css写完了吗？没有哦 明天来看一下后续还有什么吧
