css3动画效果

这是仿写的百度外卖的h5部分页面动画，效果如图所示：

核心文件引入：

swiper.min.cssswiper.min.jszepto/zepto.jszepto/event.jszepto/fx.jszepto/fx_methods.js// 响应动画需要的文件zepto/touch.js//响应长按事件需要的文件

里面的知识点：

1、loading页面、欢迎页面、swiper布局页面层叠排列，用到了绝对定位和z-index2、loading页面动画执行完毕后页面淡出（事件监听）3、欢迎页面长按按钮进入swiper布局页面（zepto中的longTap事件）4、使用rem作为单位，通过js动态修改html元素的font-size来实现动态适配多种设备5、使用sass来管理样式，通过在index.scss文件中引入其他.scss文件，例如：@import 'base.scss';编译执行后就只需在index.html中引入一个index.css文件即可。编译.scss文件使用[Koala](http://koala-app.com)6、sass语法优化：

（1）把一些运算的功能抽取出来，作为函数,例如：

//px to rem@function p2r($size){    @return($size/32)*1rem;}

使用的时候，直接width:p2r(20);即可

（2）混入：把一些公共样式进行抽取，例如：

//背景居中@mixin bgc($url,$width){    background: url($url) no-repeat center / 100% 100%;    position: absolute;    left: 50%;    margin-left:-($width/32/2)*1rem;   }

使用的时候：

.box{    @include bgc('../imgs/page1/circle1.png',200);}

7、动画效果单独写好，通过给元素动态添加animate类名而拥有动画效果，使静态页面布局与动画布局分离开来，方便查看。
8、精灵图中使用background-position来控制要显示那一块图片，并使用绝对定位控制图片间的相对位置关系。

技术实现：

1、js动态修改html元素的font-size

document.querySelector('html').style.fontSize = window.screen.width/20 +"px";

2、入场动画：给元素添加animate类名（动画效果自己写好）
3、进度条完成，页面淡出：

//原生js实现：document.querySelector('.loading .step').addEventListener('animationend',function(){        $('.loading').fadeOut();})

//jQuery实现$('.loading .step').on('animationend',function(){    $('.loading').fadeOut();})

4、长按，欢迎页淡出，进入swiper容器页面

$('.welcome .btn').longTap(function(){    $('.welcome').fadeOut(1000,function(){        $('.swiper-container .page1').addClass('animate');    }); })

5、用到的动画效果：

 1. 进度条：宽度from{width:0％}to{width:100%} 2. 旋转进入：关键要设置好旋转中心点     transform-origin:50% 100%;（底部正中间）     transform-origin:100% 100%;（右下角） 3、眨眼：y方向缩放scale(1,0) 4、来回走路：平移，走到另一端时y方向旋转180度，动画重复执行（infinite）