很多人前端工程師在做一些手機滑屏類的落地窗頁面，並且帶有一堆動畫時都是一臉懵逼，好複雜啊，js該怎麼寫？一堆問題，但是其實想實現這些功能非常簡單。只需要大家靈活運用swiper和css3的animation即可實現，而且！！最重要的是！！！不需要寫一行的js**！！是不是不相信呢？那麼下面我帶大家一起去做乙個不需要js**就實現的demo。
首先簡單演示一下要實現的效果：
1.滑動到該頁面後，圖1會從上往下掉落，並會在到達目的位置後有乙個彈起效果，圖2會跟著圖1一起掉到目標位置。
3.當使用者向下滑動時會到下乙個頁面：
4.下乙個頁面同時開始載入動畫，圖1往下掉落，並彈起，圖2從左往右滑動，到目標地點停下。
5.最終位置：
看完了效果，小夥伴們是不是很想知道怎麼不實用js就能實現這麼酷炫的效果呢！
有了swiper後，我們按照swiper的格式布局頁面
class="swiper-container">
class="swiper-slide page-1 ">
class="wrap">
src="img/t1-text.png"
alt=""
class="img_1_1">
src="img/t1-yuan.png"
alt=""
class="img_1_2">
src="img/icon_up.png"
alt=""
class="img_3">
div>
div>
class="swiper-slide page-2 ">
class="warp">
src="img/t2-2.png"
alt=""
class="img_2_1">
src="img/t2-3.png"
alt=""
class="img_2_2">
src="img/icon_up.png"
alt=""
class="img_3">
div>
div>
div>
div>頁面布局完以後，為swiper加點樣式：
html, body
.swiper-container
下面，我們來做如何滑動載入動畫。
大家通過下圖可以發現，swiper會在滑動頁面時，動態加上三個類
而其中的swiper-slide-active就是我們當前頁面的類。所以，很多同學肯定發現了，只要我們把動畫的樣式寫在這個類下，不就可以滑動載入動畫了嗎？沒錯，確實是這樣，所以我們在這個類下，寫上animation的動畫**就行，至於animation該怎麼寫，大家可以查閱w3c學習一下
css**如下：
.page-1
.img_1_1
.swiper-slide-active
.img_1_1
@keyframes page-1-1
100%
}.page-1
.img_1_2
.swiper-slide-active
.img_1_2
@keyframes page-1-2
50%75%
100%
}.img_3
@keyframes angle
100%
}.page-2
.page-2
.img_2_1
.swiper-slide-active
.img_2_1
@keyframes page-2-1
50%75%
100%
}.page-2
.img_2_2
.swiper-slide-active
.img_2_2
@keyframes page-2-2
100%
}
利用css3實現箭頭
在一些開發中，經常會用到一些箭頭，如圖所示 要實現圖上的搶這個箭頭，傳統的做法就是切一張這樣的，然後最為背景圖就行了。但考慮到節約載入資源以及css3的強大特性，我們完全可以用css3來實現如圖需求。class info r class btn 搶span div info r 這樣就可以了。利用這...
css3光束 CSS3實現光束和波浪
頁面html 人生在旅途，需要您的指引 樣式 語法解析 animation 屬性是乙個簡寫屬性，用於設定六個動畫屬性 animation name duration timing function delay iteration count direction keyframes定義和用法 通過 k...
利用css3完成switch checkbox按鈕
在日常開發中，switch按鈕也是非常常見的。如圖 原型 於開源框架jquery weui。貼上對應的 button wrap button wrap input button wrap input before button wrap input after button wrap input c...