Page 244 - css揭秘

图 8-21
我们在为 CERN（欧洲核子研究
委员会）打造一款单行模式浏览
器 的 Web 版 模 拟 器（http://line-
mode.cern.ch）的时候，用到了该
动画效果的一个变种

解决方案

核心思路就是让容器的宽度成为动画的主体：把所有文本包裹在这个容
器中，然后让它的宽度从 0 开始以步进动画的方式、一个字一个字地扩张到
它应有的宽度。你可能已经察觉到了，这个方法是有局限的：它并不适用于
1 ①
多行文本 。然而幸运的是，在绝大多数情况下，我们把这种效果应用在类似
标题的单行文本上。

另外一件需要注意的事情是，动画的持续时间越长，动画效果越差：持
续时间较短的动画会让界面显得更加精致，在某些场景下还是有益于可用性
的。反之，动画的持续时间越长，越容易让用户感到厌烦。因此，即使这个
技巧可以用在大段文本身上，也不一定是个好主意。
好的，我们开始写代码吧！假设我们需要把这个动画效果应用到最顶级
的标题（<h1>）上，并且已经它把设置为等宽字体了，结构代码如下所示 图 8-22
（效果见图 8-22）： 我们的起点
HTML
<h1>CSS is awesome!</h1>

我们可以很容易地给它加上一个动画，让它的宽度从 0 变化到完整的宽
度，就像这样：

① 理论上来说，我们也可以让多行文本实现这种动画效果，但这样一来就需要给每一行文本包
一层容器，同时还要维护合适的动画延时（也就是说，整件事情得不偿失）。

45 打字动画 213

඀ࠡ JOEC