近年來，HTML5應用愈發廣泛，并有取代Flash的趨勢。很多人知道利用HTML5可以做出好的動作效果，但你知道它是怎么做出來的嗎?今天小千就來給大家分享一下HTML5培訓教程中動效制作的幾種方法。

1、逐幀動畫。逐幀動畫即是利用一張等間距的動畫分解逐幀圖片，由js腳本模擬編寫或是使用css3新屬性step()制作而成。逐幀動畫腳本可以控制逐幀動畫的快慢和動作的暫停，后期可以通過代碼進行動畫速率及透明度的修改。

2、GIF。GIF圖片擅長于制作細節的小動畫、位圖，優勢在于 “體型”很小，可壓縮，制作成本低，以圖片的形態適用于各種操作系統，無兼容性的后顧之憂。GIF動畫最常在H5動效里當擔loading導航條，熱門小標簽等元素。

3、SVG。SVG擅長于線條的動畫，弊端是：IE8,Android4.2及以下支持不好。一張SVG圖，其實是由一堆的定位錨點連線生成的，所以它可以很方便的存為文檔格式。

4、Canvas。Canvas是HTML5 的新元素 ，類似畫板，擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。Canvas本身是沒有繪圖能力的，所有的繪制工作必須依賴 JavaScript 完成。

5、CSS3。CSS3擅長于平面層的動畫，缺陷在于它的部分屬性還沒有被瀏覽器有好的支持。CSS3的動畫三大屬性：Transform 變形，Transition 過渡，和Animation 動畫。

掌握HTML5基礎知識，了解動效制作的基本方法，你就可以制作出一個簡單的頁面。

本文來自千鋒教育，轉載請注明出處。

總結

以上是生活随笔為你收集整理的HTML5培训教程学习之动效制作的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。