CSS3 人物走路動畫

接著上次講的@keyframe動畫,有時候我們會需要類似GIF圖片一樣的動態效果,而這個效果CSS3也是可以實現的。

 

首先我們先來準備一張Sprite圖(圖片來源

walking-man

人物走路的分解圖共有12張,每一張的寬度為140px,總長度為1680px.

接著我們來設定@keyframes動畫以及人物sprite:

animation: run 1.4s steps(12) infinite的意思是:

執行run動畫,動畫時間1.4秒,分為12步,無限循環。

效果圖:

man-walking

 


參考資料:

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *