精靈圖是一種優(yōu)化網(wǎng)站性能的技術(shù)，將多個(gè)小圖片合并成一張大圖片，再通過(guò)CSS的background-position屬性來(lái)定位圖片展示的部分，從而減少網(wǎng)站請(qǐng)求的次數(shù)，加快網(wǎng)頁(yè)的加載速度。在使用精靈圖的基礎(chǔ)上，我們可以通過(guò)設(shè)置不同的background-position值，來(lái)制作簡(jiǎn)單的動(dòng)畫效果。下面我們來(lái)介紹如何使用精靈圖制作動(dòng)畫效果。

首先，我們準(zhǔn)備一張8個(gè)小圖片的精靈圖（sprite.png），如下圖所示：

.sprite{
background-image: url(sprite.png);
background-repeat: no-repeat;
display:inline-block;
width:32px;
height:32px;
}

接下來(lái)，我們定義一個(gè)div，使用class為sprite，顯示我們需要展示的第一張圖片：

接下來(lái)，我們可以通過(guò)設(shè)置animation屬性實(shí)現(xiàn)動(dòng)畫效果。比如，我們要制作一組簡(jiǎn)單的閃爍動(dòng)畫效果，代碼如下：

@keyframes blink {
0% {background-position: 0px 0px;}
50% {background-position: -32px 0px;}
100% {background-position: 0px 0px;}
}
.sprite{
animation: blink 1s infinite;
}

其中，@keyframes定義了動(dòng)畫的關(guān)鍵幀，也就是每個(gè)時(shí)間點(diǎn)需要展示的圖片位置。這里我們定義了3個(gè)關(guān)鍵幀，分別為0%，50%，100%。

在sprite類選擇器中，我們通過(guò)animation屬性來(lái)引用定義的關(guān)鍵幀，并設(shè)置了動(dòng)畫的播放時(shí)間和次數(shù)。

通過(guò)這種方式，我們可以輕松制作出各種簡(jiǎn)單的動(dòng)畫效果。不過(guò)需要注意的是，必須要在精靈圖中包含所有需要展示的小圖片，而且每個(gè)小圖片的尺寸需要相同，否則定位可能會(huì)出現(xiàn)問(wèn)題。