Page 240 - css揭秘

44 闪烁效果

背景知识
基本的 CSS 动画，“逐帧动画”

难题

还记得当年的 <blink> 标签吗？当然记得。这个标签已经成为了这个
行业的一枚文化印记，见证了那个“刀耕火种”的年代，而今已随大江东
去，长存谈笑声中。这个标签一直饱受诟病，一个原因在于它违背了结构和
样式分离的准则，另一个更重要的原因在于，它在 20 世纪 90 年代末期被滥
用了，而这对于当时的互联网用户来说简直就是一场灾难。甚至它的发明者
Lou Montulli 也曾这样说道：“（我认为）blink 标签是我为互联网所创造的最
糟糕的东西。”

现在 <blink> 带来的噩梦早已远离我们，但有时候我们却不得不承认，
闪烁动画仍然是不可或缺的。我们一开始可能会极力排斥这个想法，但总有
一天会意识到，在某些使用场景下，闪烁效果对可用性是有益的，而不是有
害的。
有一种常见的用户体验设计手法，就是通过数次闪烁（不超过三次）来
提示用户界面中有某处发生了变化，或者用来凸显出当前链接的目标（如果
页面中某元素的 ID 与 URL 中的 #hash 相匹配，则它就是链接的目标）。在
此类场景下使用闪烁，可以有效地把用户的注意力引导到某个特定区域。只
要我们把闪烁的次数限制在一定范围之内，就可以完全避免 <blink> 标签
的那种负面作用。另一种取其精华（有效引导用户的注意力）同时弃其糟粕
（令用户分心、烦躁，甚至可能诱发癫痫）的方法，是让闪烁过程“平滑”
起来（也就是说，其效果不是“开”和“关”状态之间的硬切，而是让这两
个状态的切换具有一个平滑的过渡）。

不过，如何才能实现上述要点呢？ <blink> 标签有一个纯 CSS 版的替
代物，就是 text-decoration: blink，但它的功能极为有限，无法满足上
述定制需求；而且就算这个属性的功能已经够用了，它的浏览器支持度也相
当差。那我们可以用 CSS 动画来实现它吗？还是说只能求助于 JavaScript 这
最后一根救命稻草？

44 闪烁效果 209

඀ࠡ JOEC