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

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

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

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

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

2、 雪碧圖的工作原理

我們舉一個例子，一個每幀寬度為100px的動畫，如果它有四個動作，我們就需要把它們依照一定順序排列在一張400px寬的PNG圖片上，然后再用一張寬度為100px的背景圖片來調(diào)用這張400px的圖片。通過實踐的推移我們在視覺上看到這四個動作不斷地在這張圖上滾動。

3、 雪碧圖的缺點

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