------------------------------------ before we getting start ------------------------------------
整个编写过程被分为8大章：
- 页面的搭建与切换
- 小男孩的动作的分解
- 流程的编写与封装
- 主题页面一
- 主题页面二
- 主题页面三
- 背景音乐
- 最终效果
情人节主题主在逻辑上面被分成三个画面。但从目录中我们可以看到，一开始我们并没有急着去实现每个页面的细节，而是从整体出发，把贯穿整体的动作与结构整理出来，包括页面的切换和小男孩的具体动作的实现和封装。之后再在第4，5，6大章中具体实现每个页面中的动画。
总的来说，我们的代码编写是：整体->局部
1. 页面的搭建与切换
页面的横向布局
横向效果上：
- 页面主题会滚动
- 小男孩会走动
综合考虑，我们的背景应该考虑到：
- 页面是一个横向的
- 包含了3个主题页面
- 页面之间是无缝拼接的
- 页面还要能滚动
页面之间的卷滚切换效果
如何实现页面与页面之间的切换呢？一般来说要根据布局的结构来，大体有2种：
- 移动父容器，改变父容器的坐标
- 移动每一个子容器的坐标
--> 显而易见，移动父容器简单很多，只需要改变父容器X轴的坐标就可以了
改变坐标的处理可以分为2种：
- 传统的top,left坐标修改（修改元素style是坐标属性，一般都需要配合定时器使用）
- CSS3中的transform属性
transform 属性向元素应用 2D 或 3D 转换，该属性允许我们对元素进行旋转、缩放、移动或倾斜。该属性是静态属性，不是动画属性，一旦写到style里面，将会直接显示作用，无任何变化过程。
为了实现"动画"通过设置transition的一些参数，让transform这个属性发生变化）
