簡(jiǎn)介：本課程帶領(lǐng)大家使用JS和CSS3技術(shù)實(shí)現(xiàn)粽子動(dòng)畫的效果，課程分為“分析動(dòng)畫特效”和“開發(fā)”兩個(gè)部分，分析動(dòng)畫部分使用“關(guān)鍵時(shí)間點(diǎn)逆向分析”的方法帶領(lǐng)大家把動(dòng)畫制作過程揭秘出來，“開發(fā)”部分，首先對(duì)動(dòng)畫效果進(jìn)行深入剖析、然后再進(jìn)行動(dòng)畫的一步一步分步制作。
第1章 課程介紹及分析
本章節(jié)對(duì)效果進(jìn)行了演示，以及使用了“關(guān)鍵時(shí)間點(diǎn)逆向分析”的方法帶領(lǐng)大家把動(dòng)畫制作過程揭秘出來。
第2章 代碼實(shí)現(xiàn)
本章節(jié)先對(duì)靜態(tài)界面&元件概念進(jìn)行講解，然后使用純 CSS 實(shí)現(xiàn)動(dòng)畫和過渡動(dòng)畫效果，以及腳本實(shí)現(xiàn)時(shí)間線類和構(gòu)建場(chǎng)景動(dòng)畫，到最后完成粽子的旋轉(zhuǎn)動(dòng)畫效果。
- 視頻： 2-1 開發(fā)環(huán)境介紹 (03:37)
- 視頻： 2-2 完成基本界面元素（一） (10:40)
- 視頻： 2-3 完成基本界面元素（二） (11:13)
- 視頻： 2-4 定義抖動(dòng)的CSS動(dòng)畫 (07:16)
- 視頻： 2-5 完成祝福語CSS過渡動(dòng)畫 (08:37)
- 視頻： 2-6 動(dòng)畫樣式（粽肉動(dòng)畫） (17:11)
- 視頻： 2-7 動(dòng)畫樣式（文字動(dòng)畫） (08:26)
- 視頻： 2-8 動(dòng)畫樣式定義（文字視角） (07:46)
- 視頻： 2-9 腳本編寫時(shí)間類構(gòu)造器 (10:38)
- 視頻： 2-10 用時(shí)間類編寫展開粽子動(dòng)畫序列（一） (10:06)
- 視頻： 2-11 用時(shí)間類編寫展開粽子動(dòng)畫序列（二） (04:20)
- 視頻： 2-12 實(shí)現(xiàn)托盤旋轉(zhuǎn)動(dòng)畫 (15:45)
- 視頻： 2-13 圖片加載器解決閃動(dòng) (03:48)
第3章 總結(jié)
本章帶領(lǐng)大家對(duì)課程所講解到的關(guān)鍵知識(shí)點(diǎn)進(jìn)行了總結(jié)及知識(shí)擴(kuò)展。