Html5,CSS3实现一个七夕贺卡（仿）

一 结构的切换与搭建

1 页面的横向布局

- 页面是一个横向的

- 包含了3个主题页面

- 页面之间是无缝拼接的

- 页面还要能滚动

处理方法:三个块级元素我们做3个块级元素，每一个块元素代表一个主题页面的容器节点。然后设置一个父容器是3个块元素的宽，通过float处理，这样就形成了一个横向的3个无缝拼接的页面

2 页面之间的卷滚切换效果

移动父容器，改变父容器的坐标

移动每一个子容器的坐标

改变坐标的处理可以分为2种：

传统的top,left坐标修改
CSS3中的transform属性
（ transition可以设置一些具体的参数，比如动画执行的时间，变化的算法、动画延时等等）

这里需要特别注意的就是：

transform属性是静态属性，不是动画属性，一旦写到style里面，将会直接显示作用，无任何变化过程

3 页面切换部分的代码封装

4 布局的自适应动态调整

小男孩在布局上不能嵌入任何一个页面内，否则无法切换到下一个页面中了。所以小男孩的布局与页面根节点属于并列结构

人物坐标的算法：

小男孩的top坐标值 = 中间路段的中间坐标值 - 小男孩的高度

5 精灵动画的实现

CSS Sprites：靠不断的切换图片让人感觉视觉上不断在变化

大多数的做法就是把图片都合成一张大图再利用CSS的以下属性

background-image
background-repeat
background-position

slowWalk类定义规则：

定义一个名为person-slow的@keyframes规则，@keyframes用百分比来规定变化发生的时间， 0%

是动画的开始，100%

是动画的完成，规则中有4个百分比值的变化，每个比值分别通过position获取一张图片，分别是0%,25%,50%,75%,100%。在950毫米内从0%-100%发生4次变化，采用的算法是steps(1, start)一帧一帧的切换，通过设置infinite参数每950毫秒不断循环

6 走路的实现