繼七夕之后，我又出了一個聖誕主題的課程。聖誕主題是基於HTML5+CSS+JS編寫與實現的，同時也是七夕主題的故事延續。聖誕主題依舊延續着七夕主題設計的思路，引入了3個經典的場景頁面，在每個場景中表述着不同的行為。實現上總結了之前七夕主題的一些經驗與反饋，並在此之上加以優化與擴展。這個案例不算很難，但是把前端做動畫的一些精髓已經講透了。運用的技術基本就是H5+JS+CSS3，但是每個部分的實現都會有很多知識點的涉及，這里大體的總結下
具體我來歸納下改良的技術方案與涉及到的知識點：
- 為了處理自適應的問題，采用了新的rem布局代替百分比布局方案
- 采用了簡單的面相對象編程，采用類的形式對每一個頁面場景元素都做了一定的封裝
- 引入了Observer觀察者模式的處理機制
- 適當的引入svg概念，通過svg繪制矢量圖
- 精靈動畫部分依舊大量采用了css3 animation動畫的steps關鍵幀，但是不同的是，解決了自適應雪碧圖的問題
- 元素運動部分優化了css3 transform transition的使用
- 新增了video視頻元素的運用
- 新增了3d旋轉木馬的效果實現
- 新增了canvas版的雪花實現
- 等等.............
課程連接：