您的位置：首页 > Web前端 > CSS

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

2016-09-28 11:03 573 查看

很多人前端工程师在做一些手机滑屏类的落地窗页面，并且带有一堆动画时都是一脸懵逼，好复杂啊，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代码的同学，可以联系我哟！

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航