html5怎麼加入圖片動畫效果

html5加入圖片動畫效果的方法：1.利用css3 animation的steps實現spirit精靈動畫；2、利用html5 canvas實現gif圖片。

本教學操作環境：windows7系統、html5&&css3版，DELL G3電腦。

html5加入圖片動畫效果的方法：

方法一：利用css3 animation的steps實作spirit精靈動畫;

#在套用CSS3 漸層/動畫時，有個控制時間的屬性 。它的取值中除了常用到的 三次貝塞爾曲線 以外，還有個讓人比較困惑的 steps() 函數。

steps() 第一個參數number 為指定的間隔數（必須是正整數），也就是把動畫分成n 步階段性展示，第二個參數預設為end，設定最後一步的狀態，start 為結束時的狀態，end 為開始時的狀態。

那麼有了這個steps()，我們就可以實作web中常見的Sprite 精靈動畫了，見demo：

方法二：利用html5 canvas實作gif圖片；

利用canvas的drawImage把含有幀的圖片載入到canvas中去，再結合js實作動畫，見demo：

相關學習推薦： html影片教學

以上是html5怎麼加入圖片動畫效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！