慕課網新教程H5+JS+CSS3 實現的七夕言情主題效果已經出爐了
從設計到實現到錄制與編寫用了快1個月的時間，說真的這個案例是慕課定制的，我之前也沒有系統的做過這樣的一個效果，在實現的時候自己也重新復習了下CSS3動畫的知識點
下面是一個簡單的預覽
這個是一個比較綜合的效果了，這個案例把前端做動畫的一些精髓已經講透了
運用的技術基本就是H5+JS+CSS3，但是每個部分的實現都會有很多知識點的涉及
這里大體的總結下
- 自適應分辨率的問題可以采用的是JS+百分比布局處理
- 通過合成"雪碧圖"解決圖片加載與資源占用的問題
- "雪碧圖"自適應的問題
- 通過CSS3的animation實現幀動畫，並且可以控制狀態
- 布局除了left.top布局外，還可以使用最新的css3的transform處理
- 元素的變化，可以通過設置translate3d啟動GPU加速
- 可以用CSS3的transition做漸變動畫
- HTML5音頻的使用
- 采用promise可以解決異步編程的邏輯嵌套問題
- 代碼組織的一些思路
整個案例涉及的東西都是我們日常開發能夠使用到的一些手段，希望可以通過這個案例把前端的一些方面的知識點給融合貫穿起來，從而得到系統透徹的理解，並且能有舉一反三，融匯貫通的效果！