实现步骤：

 

　　一、编写HTML页面（根据PSD来制作H5的页面）

 

　　注意事项：编写移动端页面的时候需要考虑到很多分辨率的问题，页面布局所以我使用的都是rem方式，因为页面中会有很多页面块，我们写页面排版的时候需要写多个page-box块来区分不同的页面内容。

 

　　二、编写CSS3动画库（用于控制页面中元素的动画效果）

 

　　注意事项：编写css3的动画要靠keyframes来自定义各种动画动作，我们一般会看到微信里面的动画页面中会有各种的动画效果，其实这些都是通过keyframes来预先定义好的。这里看个代码片段：

 

　　@-webkit-keyframes flash {

 

　　from, 50%, to {

 

　　opacity: 1;

 

　　}

 

　　25%, 75% {

 

　　opacity: 0;

 

　　}

 

　　}

 

　　@keyframes flash {

 

　　from, 50%, to {

 

　　opacity: 1;

 

　　}

 

　　25%, 75% {

 

　　opacity: 0;

 

　　}

 

　　}

 

　　。flash {

 

　　-webkit-animation-name: flash;

 

　　animation-name: flash;

 

　　}

 

　　这个就是自定义的一个动画，用于控制元素淡化效果的。我们还可以通过css3的transform属性中的translate3d、rotate3d、scale3d、cubic-bezier方法来自定义各种动画。

 

　　如果大家不想自己去写那么多的自定义动画组，那么我这里给大家推荐一个国外大侠写的一个开源的动画库。它的名字叫做animate.css

 

　　animate.css内置的动画有多种

 

　　1. bounce（跳动）、flash（闪光）、pulse（脉冲）、rubber band（橡皮筋）、shake（抖动）、swing（摇摆）、wobble（摇摆不定）

 

　　2. fade（淡入或淡出）

 

　　3. flip（翻转）

 

　　4. rotate（旋转）

 

　　5. slide（滑动）

 

　　6. zoom（放大或缩小）

 

　　三、编写Js控制器（用于控制Touch相关滑动事件）

 

　　移动端的Js库我用的Zepto.js，它用来控制整个页面的执行流程。包括Touch的滑动，页面块的显示隐藏。