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

妖狐艹你老母 2022-09-23 04:00 590阅读 0赞

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

<div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide"><img src="logo.png"></div>
                    <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"></div>
                <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div>
            </div>

然后到js部分添加翻页效果，进行初始化。

var swiper = new Swiper('.swiper-container',{
                    pagination:'.swiper-pagination',
                    nextButton:'.swiper-button-next',
                    prevButton:'.swiper-button-prev',
                    grabCursor:true,   //抓手光标开启
                    effect:'flip'   //翻转效果：3D翻转

这样一个带有3D翻页效果的页面就完成了

发表评论取消回复

表情：

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

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

相关阅读

相关 CSS 知识碎片[二] CSS3 3d 特效翻页 & 立方体效果

> 业精于勤荒于嬉今天今天今天，读完了本月的第三本书，书中自有黄金屋一点都没错了。开始一件事情最好的时机是十年前，其次是现在。今天来写一个css3 的3d 特效。

左手的ㄟ右手/ 2022年12月27日 08:41/ 0 赞/ 181 阅读

相关翻页效果实现，小程序，H5，翻书效果

本代码是实现小程序的左右滑动，点击翻书的效果，改改在H5也可以用。效果图： ![20201110143733943.gif][] 实现代码： <image c

布满荆棘的人生/ 2022年12月20日 03:19/ 0 赞/ 284 阅读

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

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

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

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

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

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

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

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

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

相关纯CSS实现3D翻牌效果

CSS3演武场继续CSS案例研究，今天来看一个纯CSS实现的3D翻牌效果。简易效果请大家狠戳这里[在线体验][Link 1]，或[下载收藏][Link 2]。改进效果请

待我称王封你为后i/ 2022年08月25日 08:36/ 0 赞/ 354 阅读

相关 css3实现图片3d翻转效果

1.html部分 <body> <div class="main"> <div class="w"> <div clas

梦里梦外;/ 2022年06月17日 10:24/ 0 赞/ 251 阅读

相关 3D翻转效果的实现函数封装

实现3D翻转的效果：使用TweenMax库的方法（使用之前要先引入jQuery和TweenMax哦）参数说明：obj:是要翻转的两个面的父级，element1是正面，e

￡神魔★判官ぃ/ 2022年05月21日 05:55/ 0 赞/ 156 阅读

相关小程序简单翻页效果

做了一个简单的翻页效果，可以参考修正一下，自己也可以优化代码。我写的是超级最初版。 <view class='main'> <view class='on

- 日理万妓/ 2022年05月08日 03:54/ 0 赞/ 716 阅读

相关 swiper 立体3D相册滑动效果

<link rel="stylesheet" type="text/css" href="https://www.swiper.com.cn/dist/css/swip

我就是我/ 2022年04月04日 11:47/ 0 赞/ 603 阅读