Page 237 - css揭秘

„ GIF 不具备 Alpha 透明的特性。当我们不确定 GIF 动画的下层是什
么时，这往往是一个大问题。比如对于加载提示来说，半透明效果
是十分常见的（参见图 8-13）。
„ 我们无法在 CSS 层面修改动画的某些参数，比如动画的持续时间、
循环次数、是否暂停等。GIF 动画一旦生成，上述所有参数就固定
在文件内部了；如果想作修改，就只能动用图像处理软件去重新生
成一个 GIF 文件。从可移植性的角度来看，这种特性确实不错，但
对调试过程来说相当不便。

2004 年，Mozilla 发起了一个建议：在 PNG 格式中增加对逐帧动画
的支持，就像 GIF 格式同时支持静态图像和动画一样。这种格式被称作
APNG。它在设计时就考虑到了如何向后兼容：它会把动画的第一帧画面以
传统 PNG 文件的方式进行编码，因此对于那些不支持 APNG 特性的旧版看
图软件来说，至少可以把第一帧正常显示出来。尽管看起来大有前途，但
APNG 并没有获得足够的推广。时至今日，只有极少数的浏览器和图像处理
1 ①
软件支持这种格式 。
网页开发者甚至动用过 JavaScript 在浏览器中实现灵活的逐帧动画，比
如用一张拼合图片（image sprite）作为背景，然后用 JavaScript 动态地控制
它的 background-position。你甚至还可以找到一些专门为此设计的小型类
库！我们能否只借助清爽易读的 CSS 代码就满足这个需求呢？

解决方案

假设我们已经把动画中的所有帧全部拼合到一张 PNG 图片中了，如图
8-14 所示。

图 8-14
旋转菊花所需要的八帧画面已
经合并到一起了（图片尺寸为
800×100）
然后用一个元素来容纳这个加载提示（别忘了在里面写一些文字，来确
保可访问性），并把它的宽高设置为单帧的尺寸：
HTML
<div class="loader">Loading...</div>

.loader {
width: 100px; height: 100px;

background: url(img/loader.png) 0 0;

/* 把文本隐藏起来 */

① 关于 APNG 的更多信息，请参阅 wikipedia.org/wiki/APNG。

206 第 8 章 过渡与动画

඀ࠡ JOEC