Page 246 - css揭秘

在图 8-25 所展示的这几帧截图中可以看到，我们终于得到了期望已久
的效果：这段文字是逐字显现出来的。不过，它看起来还不够逼真。你能看
出它还缺了点什么吗？
画龙点睛的最后一步，就是给它加上一个闪烁的光标。我们在上一节中
已经弄清楚了闪烁动画的原理。在这个例子中，我们可以用一个伪元素来生 图 8-25
成光标，并通过 opacity 属性来实现闪烁效果；我们也可以用右边框来模拟 现在这段文字终于可以逐字显现
光标效果，这样就可以把有限的伪元素资源节省下来留作他用： 了，但似乎还缺了点什么

@keyframes typing {
from { width: 0 }
}
@keyframes caret {
50% { border-color: transparent; }
}

h1 {
width: 15ch; /* 文本的宽度 */
overflow: hidden;
white-space: nowrap;
border-right: .05em solid;
animation: typing 6s steps(15),
caret 1s steps(1) infinite;
}

请注意，与文字逐个跳出的动画不同，光标的闪烁动画是需要无限
循环的（即使所有的文字都显示完整之后仍然如此），因此我们需要用到
infinite 关键字。此外，这里并不需要指定边框的颜色，因为我们希望边
框颜色自动与文字颜色保持一致。在图 8-26 中，你可以看到整个动画效果
的几幅静态截图。
图 8-26
这个动画现在的表现相当完美，不过还不是很易于维护：需要根据每 在加上逼真的闪烁光标之后，我
个标题的字数来给它们分别指定不同的宽度样式，而且还需要在每次改变 们的动画终于圆满完成了
标题内容时同步更新这些宽度样式。显然，这种场景正是 JavaScript 的用武
之地：

JS
$$('h1').forEach(function(h1) {
var len = h1.textContent.length, s = h1.style;

s.width = len + 'ch';
s.animationTimingFunction = "steps("+len+"),steps(1)";
});

只需短短几行 JavaScript 代码，就可以取得两全其美的结果：不仅动画
生动逼真，而且代码易于维护！
所有这些都是极好的，但如果浏览器不支持 CSS 动画的话又会如何？
本质上所有与动画相关的效果都会被丢弃，所以最终起作用的样式只有如下
几行：

45 打字动画 215

඀ࠡ JOEC