------------------------------------ before we getting start ------------------------------------
整個編寫過程被分為8大章：
- 頁面的搭建與切換
- 小男孩的動作的分解
- 流程的編寫與封裝
- 主題頁面一
- 主題頁面二
- 主題頁面三
- 背景音樂
- 最終效果
情人節(jié)主題主在邏輯上面被分成三個畫面。但從目錄中我們可以看到，一開始我們并沒有急著去實現(xiàn)每個頁面的細節(jié)，而是從整體出發(fā)，把貫穿整體的動作與結(jié)構(gòu)整理出來，包括頁面的切換和小男孩的具體動作的實現(xiàn)和封裝。之后再在第4，5，6大章中具體實現(xiàn)每個頁面中的動畫。
總的來說，我們的代碼編寫是：整體->局部
1. 頁面的搭建與切換
頁面的橫向布局
橫向效果上：
- 頁面主題會滾動
- 小男孩會走動
綜合考慮，我們的背景應該考慮到：
- 頁面是一個橫向的
- 包含了3個主題頁面
- 頁面之間是無縫拼接的
- 頁面還要能滾動
頁面之間的卷滾切換效果
如何實現(xiàn)頁面與頁面之間的切換呢？一般來說要根據(jù)布局的結(jié)構(gòu)來，大體有2種：
- 移動父容器，改變父容器的坐標
- 移動每一個子容器的坐標
--> 顯而易見，移動父容器簡單很多，只需要改變父容器X軸的坐標就可以了
改變坐標的處理可以分為2種：
- 傳統(tǒng)的top,left坐標修改（修改元素style是坐標屬性，一般都需要配合定時器使用）
- CSS3中的transform屬性
transform 屬性向元素應用 2D 或 3D 轉(zhuǎn)換，該屬性允許我們對元素進行旋轉(zhuǎn)、縮放、移動或傾斜。該屬性是靜態(tài)屬性，不是動畫屬性，一旦寫到style里面，將會直接顯示作用，無任何變化過程。
為了實現(xiàn)"動畫"通過設(shè)置transition的一些參數(shù)，讓transform這個屬性發(fā)生變化）
