最好的H5動效視頻教程：HTML5炫酷動效案例

一個元素，動態的往往比靜態的更能吸引人們的注意力，由此推之，一個操作界面，活潑的動效交互反饋將會給用戶帶來更好的操作體驗和感知。小到APP的Loading動畫，大到各大網站炫酷的H5運營頁的展現，可以說H5動效已經逐漸滲透到人們的生活的各個領域，並且成為了一名WEB前端開發工程師的加分技能。

HTML5炫酷動效案例視頻教程由專業教師團隊潛心研發、匠心打造，藉助騰訊課堂優質的在線教育平台，為H5動效的學習者提供最精品的課程和高品質的在線授課體驗。

HTML5炫酷動效案例在線視頻教程，7月16日開講，每周一、三、五、日，20:00—22:00與大家準時相約。首先我們先感受一下第一周的課程都涉及哪些精彩的內容：

第一節：JS實戰「炫酷首頁」之整體框架搭建

1、布局（HTML+CSS）

劃分區域、CSS重置樣式與公共樣式、CSS劃分

2、適配（JS+CSS）

獲取瀏覽器尺寸、onresize

3、封裝常用方法

4、滾輪切屏與點擊切屏

DOMMouseScroll、mousewheel、滾輪觸發優化處理、toMove方法封裝

第二節：JS實戰「炫酷首頁」之3D翻牌與網格演算法

1.3D屬性（CSS3）

Perspective、backface-visibility、transform:rotateY

2.JSON數據

基本格式、動態創建節點

3.網格計算

For循環操作、坐標分配

第三節：JS實戰「炫酷首頁」之JS萬花筒與canvas曲線

1.萬花筒特效（JS）

方向檢測、圖片替換操作

2.canvas基本操作（H5）

繪圖環境、圓形繪製

3.canvas曲線運動

動畫實現原理、數學換算

第四節：JS實戰「炫酷首頁」之視覺差與載入動畫

1.視覺差特效（JS+CSS3）

入場動畫、出場動畫、整體切換組合

2.音頻設置（H5）

Audio標籤基本屬性、Audio標籤方法與事件

3、載入動畫

New image()對象、進入首頁動效

以上內容只是第一周的視頻教程介紹，為期20周的在線課程將會有更多精彩的內容等待大家去探尋。

HTML5炫酷動效案例雖是免費的前端學習教程，但卻有專業的師資助力；雖是在線視頻授課，卻能享受線上+線下解答的超強責任心團隊貼心服務。無論是程序小白還是有經驗的前端程序猿或程序媛，都能左右採獲，受益匪淺。

在線課程地址：https//http://ke.qq.com/course/215364#tuin=9c72893a