H5+JS+CSS3 實現聖誕情緣

課程簡介

本課程中使用面向對象的編程方式，採用H5+JS+CSS3的混合使用實現整個功能。課程當中總共分為3個主題場景圖，多個精靈圖以及雪碧圖，實現了靜與動的完美結合，並且由淺入深的將整個案例拆分講解。

課程大綱

第1章效果預覽與介紹

本章主要介紹課程實現的效果以及案例中要用到的主要技術

1-1課程簡介(03:16)

第2章設計思路與蘊涵的知識點

本章主要介紹課程的整體框架，整體思路以及蘊涵的知識點

2-1整體介紹(01:40)

2-2編程思路(02:15)

第3章技術點的分解

本章主要介紹該案例要用到的詳細的知識點，並將對這些知識點進行一一的講解

3-1自適應rem布局

3-2關鍵幀動畫

3-3自適應雪碧圖

3-4元素運動實現

3-53D變換的梳理

3-6異步編程梳理

3-7觀察者模式的理解

3-8SVG概述

3-9CANVAS概述

第4章整體結構與鏡頭切換效果的實現

本章主要對布局結構、鏡頭效果、代碼封裝、場景切換以及場景音樂的介紹

4-1布局結構

4-2鏡頭效果

4-3代碼封裝

4-4場景切換

4-5場景音樂

第5章場景頁面A

本章主要是對聖誕樹、月亮與雲、聖誕雪橇、SVG星星以及3D開創效果這些場景的解析

5-1聖誕樹、月亮與雲

5-2聖誕雪橇

5-3SVG星星

5-43D開窗效果

第6章場景頁面B

本章主要是對小男孩和小女孩的動作分解，以及講解3D的旋轉特效

6-1小男孩動作分解

6-2小女孩動作分解

6-33D旋轉特效(上)

6-43D旋轉特效(中)

6-53D旋轉特效(下)

6-63D旋轉視頻

第7章場景頁面C

本章主要講解了3D關窗的效果以及canvas繪製的飄雪效果

7-13D關窗效果

7-2canvas飄雪(上)

7-3canvas飄雪(中)

7-4canvas飄雪(下)

第8章最終效果與總結

本章會給大家展示案例的最終效果，也會將案例所用到的知識給大家作一個總結

8-1最終效果與總結

H5+JS+CSS3 實現聖誕情緣

基本介紹

課程簡介

課程大綱

相關詞條

熱門詞條