慕課網H5聖誕主題

繼七夕以後，我又出了一個聖誕主題的課程。聖誕主題是基於HTML5+CSS+JS編寫與實現的，同時也是七夕主題的故事延續。聖誕主題依舊延續着七夕主題設計的思路，引入了3個經典的場景頁面，在每一個場景中表述着不一樣的行爲。實現上總結了以前七夕主題的一些經驗與反饋，並在此之上加以優化與擴展。這個案例不算很難，可是把前端作動畫的一些精髓已經講透了。運用的技術基本就是H5+JS+CSS3，可是每一個部分的實現都會有不少知識點的涉及，這裏大致的總結下

具體我來概括下改良的技術方案與涉及到的知識點：

1. 爲了處理自適應的問題，採用了新的rem佈局代替百分比佈局方案
2. 採用了簡單的面相對象編程，採用類的形式對每個頁面場景元素都作了必定的封裝
3. 引入了Observer觀察者模式的處理機制
4. 適當的引入svg概念，經過svg繪製矢量圖
5. 精靈動畫部分依舊大量採用了css3 animation動畫的steps關鍵幀，可是不一樣的是，解決了自適應雪碧圖的問題
6. 元素運動部分優化了css3 transform transition的使用
7. 新增了video視頻元素的運用
8. 新增了3d旋轉木馬的效果實現
9. 新增了canvas版的雪花實現
10. 等等.............

課程鏈接：

http://www.imooc.com/learn/545