我们先来看看设计网站时的雪(xuě)碧图是什么意思。雪(xuě)碧图是CSS的一种技术,是英文(wén)名字CSS Sprite的由来,也会有(yǒu)人叫它CSS精灵,算是CSS图像的一种合并技术。它所调用(yòng)的图片大多(duō)都為(wèi)PNG格式,它支持多(duō)级透明,最后把动画依照一定的顺序排列起来。那么除了雪(xuě)碧图之外,我们在设计网站时常用(yòng)的动画显示手段还有(yǒu)哪些呢(ne)?
1、 网站的动画展示手段
①HTML5的视频播放。虽然这种方式比较方便而且显示速度快,但其缺点是无法兼容低版本的浏览器,这就导致很(hěn)多(duō)访问用(yòng)户无法看到这个视频。
②Flash player播放器的播放。这是在没有(yǒu)H5播放视频时十分(fēn)流行的一种动画播放方式,这在当时就有(yǒu)些明显的缺点,其速度慢安全性低经常被人所诟病。
③使用(yòng)GIF格式的图片。虽然这种动画播放方式使用(yòng)空间非常小(xiǎo),但其动画播放長(cháng)度短小(xiǎo),而且它在设计网站时只支持透明与非透明两种属性。
2、 雪(xuě)碧图的工作原理(lǐ)
我们举一个例子,一个每帧宽度為(wèi)100px的动画,如果它有(yǒu)四个动作,我们就需要把它们依照一定顺序排列在一张400px宽的PNG图片上,然后再用(yòng)一张宽度為(wèi)100px的背景图片来调用(yòng)这张400px的图片。通过实践的推移我们在视觉上看到这四个动作不断地在这张图上滚动。
3、 雪(xuě)碧图的缺点
在设计网站时,虽然雪(xuě)碧图应用(yòng)很(hěn)广泛,但其图片的帧数过多(duō)会占用(yòng)很(hěn)大的内存。所以在设计这类图片的时候一定要控制帧的数量,一般都会在12帧左右。