Sprite Animation with pure CSS

CSS Image Sprites 提供了一種有效的方法來減少網頁的加載時間和提升性能。 這篇文章將深入探討 CSS 圖片精靈的使用，包括其基本概念、實作方法、最佳實踐、優缺點分析，以及如何利用這一技術來優化網站性能。

第二種叫 Extended CSS Sprites 或 Extending CSS Spriting，是使用 img 標籤，設定為絕對坐標後，再用一個相對坐標的 div 包起來，使用 clip 切出想要顯示的圖片位置後，再透過微調位置來擺放好。

原理 CSS Sprites 是把多個圖片合併 是減少下載圖片次數的方法之一 在處理連續圖片做出動畫時也很適合!! Sprites 就是一張合併出來的大圖 只要透過CSS控制X,Y的定位即可!!

一般在做網頁時，都會加入許多圖示來讓整體網頁看起來更為活潑，不過你可能不知道，當一個頁面裡圖示越多， 使用 者就必須花更多 時間 來讀取這些零散的圖示，但透過 CSS Sprites 這項技術，可以幫你把所有圖示合併成一張大圖，在以CSS的定位方式來讓某 ...

CSS sprites 技術是一種通過在單個檔案中組合影象來減少為影象資源做出的 HTTP 請求數量的方法。

這是使用影像精靈最簡單的方法，現在我們要透過使用連結和懸停效果來擴充套件它。 我們將使用精靈影像（“img_navsprites.gif”）來建立導航列表。 現在我們要為我們的導航列表新增一個懸停效果。 提示： :hover 選擇器可用於所有元素，不僅僅是連結。 因為這是一個單一影像，而不是六個獨立檔案，所以當用戶將滑鼠懸停在影像上時，將 **沒有載入延遲**。

使用 CSS sprites 的主要好處是它們可以幫助改善網站的頁面加載時間。 每次在網頁上加載圖像時，都需要一個單獨的 HTTP 請求，這會減慢加載過程。 通過將多個圖像組合成單個 sprite 圖像，我們可以減少加載頁面所需的 HTTP 請求數。