利用swiper和css3实现手机滑屏与动画效果

很多人前端工程师在做一些手机滑屏类的落地窗页面，并且带有一堆动画时都是一脸懵逼，好复杂啊，js该怎么写？一堆问题，但是其实想实现这些功能非常简单。只需要大家灵活运用swiper和css3的animation即可实现，而且！！最重要的是！！！不需要写一行的js代码！！是不是不相信呢？那么下面我带大家一起去做一个不需要js代码就实现的demo。

首先简单演示一下要实现的效果：
1.滑动到该页面后，图1会从上往下掉落，并会在到达目的位置后有一个弹起效果，图2会跟着图1一起掉到目标位置。

2.最终位置：

3.当用户向下滑动时会到下一个页面：

4.下一个页面同时开始加载动画，图1往下掉落，并弹起，图2从左往右滑动，到目标地点停下。

5.最终位置：

看完了效果，小伙伴们是不是很想知道怎么不实用js就能实现这么酷炫的效果呢！

首先我们需要下载swiper插件，大家去

http://www.swiper.com.cn/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代码的同学，可以联系我哟！

利用swiper和css3实现手机滑屏与动画效果相关推荐

UNITY 模拟手机滑屏功能
挂到ScrollRect组上,模拟手机滑屏功能 using System.Collections; using System.Collections.Generic; using UnityEngin ...
悬停渐变特效html,CSS3 transition属性实现hover渐变动画效果
CSS3 transition属性实现hover渐变动画效果我们知道许多网页动态特效都是由FLASH或JQUERY之类的JS特效库实现的实际上现在CSS3也能实现很多类似效果了,只是在各种浏览器中兼 ...
android动画效果 translate,Android利用translate、scale、alpha、rotate实现动画效果
Android利用translate.scale.alpha.rotate实现动画效果在Android中可以用animation实现动画效果,Android中的animation由四种类型组成: a ...
用css3实现摩天轮旋转的动画效果
用css3实现摩天轮旋转的动画效果 1.CSS3 @keyframes 规则如需在 CSS3 中创建动画,您需要学习 @keyframes 规则. @keyframes 规则用于创建动画.在 @ke ...
小米手机滑屏操作-appium自动化报错Injecting to another application requires INJECT_EVENTS permission...
APP自动化测试python+appium+selenium 滑屏操作练习代码如下: # 等待元素出现loc = (MobileBy.ANDROID_UIAUTOMATOR,'new UiSelec ...
html适合app的登陆页面,纯CSS3创意手机APP登录界面动画特效
这是一款使用纯CSS3制作的效果非常有创意的手机APP登录界面动画特效.该特效在用户点击登录按钮之后,按钮变形为一个小球图标,并且小球会上下弹跳,之后小球会落入界面底部成为一个图标按钮. 使用方法 H ...
css3导航渐变滑过显示动画
要点学习:[web前端25群]群号618237474 双背景设置 body{background:url("images/bg_title.jpg") top center rep ...
用css3和canvas实现的蜂窝动画效果
近期工作时研究了一下css3动画和js动画.主要是工作中为了增强页面的趣味性,大家都有意无意的加入了非常多动画效果.当然大部分都是css3动画效果.能够gpu加速,这会降低移动端的性能需求. 今天主要 ...
[译]CSS3实现柱状图的3D立体动画效果
翻译自<Animated 3D Bar Chart with CSS3> 首先,我们看一看要实现的效果: 这篇文章所实现的动画效果起源于一个小小的想法,这个想法来自于另一个网站的一篇文章, ...

利用swiper和css3实现手机滑屏与动画效果

利用swiper和css3实现手机滑屏与动画效果相关推荐

最新文章

热门文章