css3動畫效果

這是仿寫的百度外賣的h5部分頁面動畫，效果如圖所示：

核心文件引入：

swiper.min.css
swiper.min.js
zepto/zepto.js
zepto/event.js
zepto/fx.js
zepto/fx_methods.js// 響應動畫需要的文件
zepto/touch.js//響應長按事件需要的文件

裏面的知識點：

1、loading頁面、歡迎頁面、swiper佈局頁面層疊排列，用到了絕對定位和z-index
2、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）