Page 109 - css揭秘

.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);
}

你可以在图 3-56 中看到它的实际效果。由于已经找到了实现任意比率
的方法，我们甚至可以用 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;
图 3-54 animation: spin 3s linear infinite,
bg 6s step-end infinite;
我们的简单饼图可以显示出不同的 }
比率了；从上到下分别是：10%
（36deg 或.1turn）、20%（72deg
或.2 t u r n ）、40%（1 4 4 d e g 试一试 play.csssecrets.io/pie-animated
或.4turn）
这个效果很棒，但我们怎样才能制作出多个不同比率的静态饼图呢？
（这似乎才是更加常见的需求。）理想情况下，我们希望可以用这样的方式来
书写结构：
HTML
<div class="pie">20%</div>
<div class="pie">60%</div>

然后就能得到两个饼图，一个展示为 20%，另一个展示为 60%。首先，
我们需要探索如何用内联样式来实现这个需求；接下来，我们就可以写一小
段脚本来解析文本内容并把内联样式添加到元素上去，以实现代码的优雅
性、封装抽象度、可维护性，以及（可能是）最重要的一点——可访问性。
图 3-55
当比率大于 50% 时，我们的饼 用内联样式来控制饼图的比率带来了一个很大的挑战：这些负责设置比
图就崩坏了（这里演示的是 60% 率的 CSS 代码最终是要应用到伪元素身上的。你可能已经知道了，我们无
的情况） 法为伪元素设置内联样式，因此还要开动脑筋寻找对策。

78 第 3 章 形状

඀ࠡ JOEC