设计一个灵活的、可维护CSS和SVG饼图 一

前面我们已经做到了 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写完了吗？没有哦 明天来看一下后续还有什么吧

​