文章封面设计一个灵活的、可维护CSS和SVG饼图 二

我们的效果做到以下这样似乎已经完成了，但是一个好的代码应该是可以实用不同的情况，常用的情况肯定是需要满足的 。一个高质量的代码 应该是简介 、维护性强、可访问和多次实用。因此需要做一下完善。

首先写入两个div 分别为 20% 和 60%

divclass=pie90%/div
divclass=pie80%/div

然后，获得两个饼图，一个20%，一个为60%。首先是通过样式来修改 ；其次，要求代码的优雅、封装、可维护性，最重要的是可访问的前提下，我们可以总是写一段简短脚本来解析文本内容，并添加内联样式。

不过有个问题就是 控制饼图显示百分比的样式是写在 伪元素上 ，和你想的一样，无法直接为伪元素写内联样式。所以需要看一下有没有新的方法。

---

注：你可以在其他情况下使用类似的技术，使用一个值的范围（spectrum）而不需要复杂、重复的计算。同时，也可以通过逐步的设置值来调试动画。查看一个更简单、孤立的技术实例。

这个看 起来有点困难 也很少这样使用。现在想之前那样做的动画 ，他是可以暂停的，用属性让他停留在一个状态 。这个技术是可以用负动画延迟来静态地跳到动画中的任何一个点，并待在那里 。弄明白了吗？确实，负动画延迟不仅仅是规范允许的，对于以下这些情况也是非常有用的：

---

一个负的延迟是有效的。就像一个‘0s’的延迟，它意味着动画立即执行，但是是由延迟的绝对值自动进行，就好像动画已经在过去的某个指定的时间开始了，因此它似乎是从中途的活跃时间开始的。

由于动画暂停所显示的那一帧（由我们定义的负animation-delay），就是唯一显示的一帧。饼图上显示的百分比就是动画延迟的总持续时间的百分比。例如，当前动画持续时间为6s，我们设animation-delay为-1.2s来显示20%。为了简化计算，我们加上动画持续时间为100s。注意，由于动画是被永久性暂停，所扩大的时间是不会影响效果的。

还有一个问题：动画是在伪元素上的，而想要的是.pie元素上设置内联样式。但是，div上面没有动画，就需要将动画的内联样式设置在它（div）元素上，然后在伪元素上设置animation-delay: inherit;。将它们放在一起，我们对20%和60%的饼图标记如下：

divclass=pie
style=animation-delay:-20s/div
divclass=pie
style=animation-delay:-60s/div

现在，我们之前为这个动画写的CSS代码就多了 动画延迟属性 ，同时他的动画也有所改变 ：

@keyframesspin{
to{transform:rotate(.5turn);}
}
@keyframesbg{
50%{background:#655;}
}
animation:spin50slinearinfinite,
bg100sstep-endinfinite;
animation-play-state:paused;
animation-delay:inherit;

此时，我们可以将标记转换为使用百分比作为内容，正如我们最初的目标，并通过简单的脚本添加动画延迟的内联样式：

document.querySelectorAll('.pie').forEach(function(pie){
			varp=parseFloat(pie.textContent);
			pie.style.animationDelay='-'+p+'s';
		});

请注意，为了更好的可用性和可访问性，我们保留完整的文本。我们的饼图的样子如下图 。我们需要隐藏文本，为保证文本的可访问性，我们可以设置文本的color: transparent，这样是可选择和可打印的。进一步的美化（polish），可以让百分比在饼图内居中，这样用户选择它的时候，它就不会在默认的位置上。只要做一下操作：

把饼图的height改为line-height（或者加一个line-height的CSS属性，使它等于height，但这是毫无意义的重复的代码，因为浏览器会将height的计算值设置为line-height的值）。

将伪元素的position设置为absolute，并且设置它的size，以使文本不换行，不溢出。

添加text-align: center; 使文本水平居中。

整体的代码如图：

今天的分享的有点多，大家学习有难度吗？ 想学习更多 或者有点难度 可以加入我们的学习群 497187010 一起交流学习 哦！ 做个是基本完成了 ，但是大家别忘了美化 和调试了，比如兼容性等等 ，只要才是堪称完美的 ，下一篇将会将svg做法  =^^= .。