接著上次講的@keyframe動畫,有時候我們會需要類似GIF圖片一樣的動態效果,而這個效果CSS3也是可以實現的。
首先我們先來準備一張Sprite圖(圖片來源)
人物走路的分解圖共有12張,每一張的寬度為140px,總長度為1680px.
接著我們來設定@keyframes動畫以及人物sprite:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<style type="text/css"> @keyframes run { 0% { background-position: 0 0; } 100% { background-position: -1680px 0; } } #sprite { width: 140px; height: 140px; background: url("sprites.png") 0 0 no-repeat; animation: run 1.4s steps(12) infinite; } </style> |
animation: run 1.4s steps(12) infinite的意思是:
執行run動畫,動畫時間1.4秒,分為12步,無限循環。
效果圖:
參考資料: