Page 111 - css揭秘

animation-delay: inherit;
}

此时，我们就可以再次优化结构，把饼图的比率写到元素的内容
中，就像我们最开始所期望的那样；然后我们通过一段简单的脚本来把
animation-delay 写到内联样式中：

$$('.pie').forEach(function(pie) {
var p = parseFloat(pie.textContent);
pie.style.animationDelay = '-' + p + 's';
});

请注意，我们原封不动地保留了文字，因为我们需要它来确保可访问性
和可用性。目前，我们的饼图看起来就是图 3-57 这样的效果。我们可以利
用 color: transparent 来把文字隐藏起来，同时还保证了可访问性，因为
此时文字仍然是可以被选中和打印的。我们还可以进一步优化，把比率文字
放置在饼图的中心处，从而方便用户选中它。为了实现这一点，我们需要进
行以下步骤。

„ 把这个饼图的 height 换成 line-height（或者添加一个跟 height
相等的 line-height 属性，但这会增加无意义的代码重复；其实
line-height 本身就可以起到设置高度的作用）。
„ 通过绝对定位来完成对伪元素的尺寸设置和定位操作，这样它就不
会把文字推到下面了。
„ 增加 text-align: center; 来实现文字的水平居中。
最终代码看起来会是这样的：

.pie {
position: relative;
width: 100px;
line-height: 100px;
border-radius: 50%;
background: yellowgreen;
background-image:
linear-gradient(to right, transparent 50%, #655 0);
color: transparent;
text-align: center;
}

@keyframes spin {
to { transform: rotate(.5turn); }
}
@keyframes bg {
50% { background: #655; }
}

.pie::before {
content: '';
position: absolute;
top: 0; left: 50%;

80 第 3 章 形状

඀ࠡ JOEC