我們先來(lái)看看設(shè)計(jì)網(wǎng)站時(shí)的雪碧圖是什么意思。雪碧圖是CSS的一種技術(shù)，是英文名字CSS Sprite的由來(lái)，也會(huì)有人叫它CSS精靈，算是CSS圖像的一種合并技術(shù)。它所調(diào)用的圖片大多都為PNG格式，它支持多級(jí)透明，最后把動(dòng)畫依照一定的順序排列起來(lái)。那么除了雪碧圖之外，我們?cè)谠O(shè)計(jì)網(wǎng)站時(shí)常用的動(dòng)畫顯示手段還有哪些呢？

1、 網(wǎng)站的動(dòng)畫展示手段

①HTML5的視頻播放。雖然這種方式比較方便而且顯示速度快，但其缺點(diǎn)是無(wú)法兼容低版本的瀏覽器，這就導(dǎo)致很多訪問(wèn)用戶無(wú)法看到這個(gè)視頻。

②Flash player播放器的播放。這是在沒(méi)有H5播放視頻時(shí)十分流行的一種動(dòng)畫播放方式，這在當(dāng)時(shí)就有些明顯的缺點(diǎn)，其速度慢安全性低經(jīng)常被人所詬病。

③使用GIF格式的圖片。雖然這種動(dòng)畫播放方式使用空間非常小，但其動(dòng)畫播放長(zhǎng)度短小，而且它在設(shè)計(jì)網(wǎng)站時(shí)只支持透明與非透明兩種屬性。

2、 雪碧圖的工作原理

我們舉一個(gè)例子，一個(gè)每幀寬度為100px的動(dòng)畫，如果它有四個(gè)動(dòng)作，我們就需要把它們依照一定順序排列在一張400px寬的PNG圖片上，然后再用一張寬度為100px的背景圖片來(lái)調(diào)用這張400px的圖片。通過(guò)實(shí)踐的推移我們?cè)谝曈X(jué)上看到這四個(gè)動(dòng)作不斷地在這張圖上滾動(dòng)。

3、 雪碧圖的缺點(diǎn)

在設(shè)計(jì)網(wǎng)站時(shí)，雖然雪碧圖應(yīng)用很廣泛，但其圖片的幀數(shù)過(guò)多會(huì)占用很大的內(nèi)存。所以在設(shè)計(jì)這類圖片的時(shí)候一定要控制幀的數(shù)量，一般都會(huì)在12幀左右。