Page 247 - css揭秘

h1 {
width: 15ch; /* 文本的宽度 */
overflow: hidden;
white-space: nowrap;
border-right: .05em solid;
}

图 8-27
对于不支持 CSS 动画的浏览器来
说，它们得到的回退样式是这样
的（上图：支持 ch 单位的情况；
下图：不支持 ch 单位的情况）
浏览器是否支持 ch 单位会决定最终的显示效果，实际显示出的回退样
式将是图 8-27 所示的两种情况之一。如果你不希望出现第二种情况，也可
以补一行以 em 作为单位的回退样式。如果你不希望在回退结果中看到一个
不能闪烁的光标，可以把生成光标的边框样式写到关键帧中，这样当浏览器
不支持动画时，就只会显示出一条看不见的透明边框了。代码如下所示：

@keyframes caret {
50% { border-color: currentColor; }
}

h1 {
/* ... */
border-right: .05em solid transparent;
animation: typing 6s steps(15),
caret 1s steps(1) infinite;
}

这差不多已经实现了回退措施所能产生的最佳结果：在旧版浏览器中，
没有动画效果，但同时也没有任何功能失常的情况出现，所有的文本都是具
有完美可访问性的，而且文字的样式也与我们的设想别无二致。

试一试 play.csssecrets.io/typing

„ CSS 动画
http://w3.org/TR/css-animations 相关规范
„ CSS 值与单位
http://w3.org/TR/css-values

216 第 8 章 过渡与动画

඀ࠡ JOEC