[筆記] 純 CSS 製作圖片輪撥效果

先前在練習刻畫網頁時,想說做個圖片輪撥器試試。不過在不用 JavaScript 的情況下,單純用CSS3 也可以達到一樣的效果。
css3 logo


語法解說

其實跟過往運用 Flash 製作動畫的原理是類似的。你需要有告知瀏覽器你的「關鍵影格」資訊。換言之,就是「發生變化的時間點」、「何種變化」、「動畫總長度」。
1. @keyframes 是 CSS3 所使用動畫關鍵影格屬性,至於其他的相關屬性列表,你可以點選這裡來查看。
2. 動畫的作用區以 <div> 外層包覆後,將動畫指令寫在此 <div> 上。
3. 要變化的圖片,其相鄰時間是寫在包覆圖片的標籤上,如 <a> 或是 <div>。
4. 滑鼠移到圖片上後的暫停效果,是寫在包覆圖片的標籤上。
5. 影格的時間是以百分比表示。若以 「進退場 0.5 秒」+「一張圖片顯示3秒」,一共有5張圖片輪撥的狀況下,共需20秒。
100%/20=5%  (5% = 1秒),所以關鍵影格中的三個關鍵數值就會是 2.5%(0~0.5秒);17.5%(0.5秒~3.5秒);20%(3.5秒~4秒)

瀏覽器支援度

根據 CanIUse.com 所述,截至2019年5月查詢時,市面上超過9成的瀏覽器都已支援此效果。
CSS animation support

示範程式碼

資料來源

1.簡單究好 Simple is Best 網頁前端開發資訊
2.梅問題教學網

按讚加入粉絲團

延伸閱讀