swiper-页面的翻页动画--渐变效果

小咪咪 2022-09-23 04:00 841阅读 0赞

这次内容我们介绍在swiper页面的翻页动画--渐变效果  
既然有翻页，那么肯定少不了翻页效果，这个功能在swiper当中也给我们进行了包装，所以我们在使用的时候变得非常的方便。  
首先进行基本的布局以及CSS样式的设置。

<div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide" style="background-image:url(img/4.jpg)">
                    第一页
                </div>
                <div class="swiper-slide" style="background-image:url(img/5.jpg)">
                    第二页
                </div>
                <div class="swiper-slide" style="background-image:url(img/6.jpg)">
                    第三页
                </div>
            </div>
            <div class="swiper-pagination swiper-pagination-white"></div>
            <div class="swiper-button-next swiper-button-white"></div>
            <div class="swiper-button-prev swiper-button-white"></div>
        </div>

为了动画效果明显，我在每个slide当中添加了背景图片。  
然后在JS当中进行初始化，并且添加翻页动画的属性。

var swiper = new Swiper('.swiper-container',{
                pagination:'.swiper-pagination',
                paginationClickable:true,
                nextButton:'.swiper-button-next',
                prevButton:'.swiper-button-prev',
                effect:'fade'   //动画效果：渐变
            });

这样就实现了渐变的翻页动画，很简单，就是在初始化当中添加了一条属性（effect:'fade'）

发表评论取消回复

表情：

评论列表（有 0 条评论，841人围观）

还没有评论，来说两句吧...

相关阅读

相关 css3 文字渐变动画效果

.css { background-image: -webkit-linear-gradient(left, red, blue 25%, 147B96 5

川长思鸟来/ 2022年12月07日 11:40/ 0 赞/ 270 阅读

相关 html 透明度渐变效果,JS实现的透明度渐变动画效果示例

本文实例讲述了JS实现的透明度渐变动画效果。分享给大家供大家参考，具体如下： www.jb51.net JS透明度变化效果 body\{ margin: 0px; pa

Myth丶恋晨/ 2022年10月06日 10:55/ 0 赞/ 216 阅读

相关 html翻牌动画效果,js+css3翻牌动画效果

这是一款js+css3翻牌动画效果，界面设计感不错的，喜欢可以下载哦温馨提示不兼容IE6,7,8浏览器。 ![e962dcabf12d07a50339717d086dd58c

冷不防/ 2022年10月06日 04:48/ 0 赞/ 247 阅读

相关矩形做成翻页的效果html5,HTML CSS笔记变形效果-过渡效果-动画效果

一．transform CSS3 提供了元素变形效果，也叫做变换。它可以将元素实现旋转、缩放和平移的功能。属性有两个：transform 和 transform-origin

ゝ一纸荒年。/ 2022年10月05日 10:54/ 0 赞/ 229 阅读

相关仿当当App首页按钮渐变动画效果

昨天群里有个朋友说当当App首页顶部的那几个按钮渐变动画效果如何实现。然后果断安装了当当App，打开查看下是什么样的动画。来看下当当App首页： ![Center][]

小鱼儿/ 2022年09月25日 02:19/ 0 赞/ 197 阅读

相关 Swiper-页面当中添加键盘控制翻页的功能

这次内容我们介绍如何在swiper的页面当中添加键盘控制翻页的功能。开始还是搭建swiper页面。 <div class="swiper-container">

ゝ一纸荒年。/ 2022年09月23日 04:00/ 0 赞/ 258 阅读

相关 swiper-翻页效果---3D翻转效果

本次内容我们继续介绍swiper当中的翻页效果---3D翻转效果首先搭建swiper页面，设置CSS样式，为了观看效果，这一章依然在slide当中添加背景图片。

妖狐艹你老母/ 2022年09月23日 04:00/ 0 赞/ 653 阅读

相关 swiper-页面的翻页动画--3D方块效果

这次内容我们接着介绍在swiper页面的翻页动画--3D方块效果。首先搭建swiper页面，设置CSS样式，为了观看效果，这一章依然在slide当中添加背景图片。

梦里梦外;/ 2022年09月23日 04:00/ 0 赞/ 316 阅读

相关 swiper-页面的翻页动画--渐变效果

这次内容我们介绍在swiper页面的翻页动画--渐变效果既然有翻页，那么肯定少不了翻页效果，这个功能在swiper当中也给我们进行了包装，所以我们在使用的时候变得非常的方

小咪咪/ 2022年09月23日 04:00/ 0 赞/ 842 阅读

相关基于swiper的移动端H5页面,丰富的动画效果

概述通过运用swiper插件，制作移动端上下整屏滑动的H5页面，用来宣传或者简单注册等，可以嵌套H5音乐或者视频。详细代码下载：[http://www.d

ゝ一纸荒年。/ 2022年05月31日 12:43/ 0 赞/ 317 阅读