很多人前端工程师在做一些手机滑屏类的落地窗页面，并且带有一堆动画时都是一脸懵逼，好复杂啊，js该怎么写？一堆问题，但是其实想实现这些功能非常简单。只需要大家灵活运用swiper和css3的animation即可实现，而且！！最重要的是！！！不需要写一行的js代码！！是不是不相信呢？那么下面我带大家一起去做一个不需要js代码就实现的demo。
首先简单演示一下要实现的效果：
1.滑动到该页面后，图1会从上往下掉落，并会在到达目的位置后有一个弹起效果，图2会跟着图1一起掉到目标位置。
2.最终位置：
3.当用户向下滑动时会到下一个页面：
4.下一个页面同时开始加载动画，图1往下掉落，并弹起，图2从左往右滑动，到目标地点停下。
5.最终位置：
看完了效果，小伙伴们是不是很想知道怎么不实用js就能实现这么酷炫的效果呢！
首先我们需要下载swiper插件，大家去
/usage/index.html
下载并查看如何使用，用起来很简单，我就不多说了。
有了swiper后，我们按照swiper的格式布局页面
<body><!-- Swiper --><div class="swiper-container"><div class="swiper-wrapper page"><div class="swiper-slide page-1 "><div class="wrap"><img src="img/t1-text.png" alt="" class="img_1_1"><img src="img/t1-yuan.png" alt="" class="img_1_2"><img src="img/icon_up.png" alt="" class="img_3"></div></div><div class="swiper-slide page-2 "><div class="warp"><img src="img/t2-2.png" alt="" class="img_2_1"><img src="img/t2-3.png" alt="" class="img_2_2"><img src="img/icon_up.png" alt="" class="img_3"></div></div></div></div>
页面布局完以后，为swiper加点样式：
html, body {position: relative;height: 100%;padding: 0;margin: 0;}.swiper-container {width: 100%;height: 100%;}
这样，我们的滑动翻页效果就实现了。
下面，我们来做如何滑动加载动画。
大家通过下图可以发现，swiper会在滑动页面时，动态加上三个类
而其中的swiper-slide-active就是我们当前页面的类。所以，很多同学肯定发现了，只要我们把动画的样式写在这个类下，不就可以滑动加载动画了吗？没错，确实是这样，所以我们在这个类下，写上animation的动画代码就行，至于animation该怎么写，大家可以查阅w3c学习一下
css代码如下：
.page-1 .img_1_1{height: auto;width: 320px;position: absolute;left: 50%;top: 50%;margin-left:-160px;z-index:999;margin-top:-108.75px;/*animation: page-1-1 0.8s;*/animation-fill-mode: forwards;}.swiper-slide-active .img_1_1{animation: page-1-1 0.8s;}@keyframes page-1-1 {0%{top:-200%}100%{top:50%}}.page-1 .img_1_2{height: auto;width: 292.5px;position: absolute;left: 50%;top: 50%;margin-left:-145.5px;margin-top:-150.5px;/*animation: page-1-2 2s;*/animation-fill-mode: forwards;}.swiper-slide-active .img_1_2{animation: page-1-2 2s;}@keyframes page-1-2 {0%{top:-200%}50%{top:50%}75%{top:48%}100%{top:50%}}.img_3{height: auto;width: 25px;position: absolute;left: 50%;/*top: 93%;*/margin-left:-12.5px;animation: angle 0.5s infinite alternate;}@keyframes angle {0%{top:92%}100%{top:93%}}.page-2{background-color: #9261BF;background: url("../img/t2-bg.png") center center no-repeat;background-size: cover;}.page-2 .img_2_1{width: 77.5px;height: auto;position: absolute;left: 50%;margin-left: -39px;bottom: 60%;/*animation: page-2-1 2s;*/animation-fill-mode: forwards;}.swiper-slide-active .img_2_1{animation: page-2-1 2s;}@keyframes page-2-1 {0%{bottom:200%}50%{bottom:60%}75%{bottom:62%}100%{bottom:60%}}.page-2 .img_2_2{width: 144px;height: auto;position: absolute;left: 50%;margin-left: -72px;bottom: 16%;/*animation: page-2-2 1s;*/animation-fill-mode: forwards;}.swiper-slide-active .img_2_2{animation: page-2-2 1s;}@keyframes page-2-2 {0%{left:0}100%{left:50%}}
好了，这样就把我们的效果全部实现了，如果有需要完整demo代码的同学，可以联系我哟！
