H5+JS+CSS3實現七夕言情

課程簡介

七夕鄰近，才子佳人們又要開始約會了，為了心愛的她獻上一份不一樣的浪漫。本課程中使用面向接口的編程方式，採用H5+JS+CSS3的混合使用實現整個功能。課程當中總共分為3個主題場景圖，多個精靈圖以及雪碧圖，實現了靜與動的完美結合，並且由淺入深的將整個案例拆分講解。

課程大綱

第1章效果預覽與介紹

本章展示整個課程的效果以及課程中的一些注意點

1-1課程簡介(02:11)

1-2效果介紹(04:16)

1-3編程節奏(02:38)

第2章頁面的搭建與切換

本章講解了整個效果的結構搭建以及背景圖的滾動切換效果，並介紹如何進行代碼的封裝。

2-1頁面的橫向布局

2-2頁面之間的卷滾切換效果

2-3頁面切換部分的代碼封裝

第3章小男孩的動作的分解

本章講解如何實現自適應布局，小男孩整個流程的動作拆解以及運動軌跡的處理。

3-1布局的自適應動態調整

3-2精靈動畫的實現

3-3走路的實現

3-4運動的狀態控制

3-5路徑動畫的處理

第4章流程的編寫與封裝

本章講解了異步編程是怎么回事，視覺差效果又是怎么回事。

4-1異步編程的處理

4-2小男孩部分代碼的封裝

4-3頁面與人物之間形成的視覺差效果

第5章主題頁面一

本章主要是對第一副圖中動畫的講解，太陽和雲分別是如何實現的。

5-1太陽動畫效果

5-2雲動畫效果

第6章主題頁面二

本章主要是對第二副圖中動畫的講解，頁面是如何布局，開關門的效果如何實現，人物坐標如何改變，以及燈光和小鳥是如何實現的。

6-1頁面布局

6-2開門關門效果的實現

6-3燈光效果

6-4人物進出商店的坐標計算

6-5等待取花

6-6鳥動畫的實現

第7章主題頁面三

本章主要是對第三副圖中動畫的講解，頁面如何布局，星星的閃動和河水的流動是怎么實現的，人物的運動軌跡如何處理，轉身的動作又是怎么回事，還有logo的晃動以及最後唯美的飄花都是怎么實現的。

7-1頁面的布局

7-2星星與水波

7-3運動的軌跡處理

7-4轉身與logo效果

7-5飄花效果的實現

第8章背景音樂

本章講解了如何使用H5中的audio實現整個課程中的音樂效果。

8-1HTML5audio

第9章最終效果

此章為本課程的最後一章，講解了整個案例效果中的一些注意點及效果的展示

H5+JS+CSS3實現七夕言情

基本介紹

課程簡介

課程大綱

熱門詞條