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

梦里梦外; 2022-09-23 04:00 279阅读 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>

然后在js当中进行初始化以及添加翻页动画。依然是一条属性，但是有些不同。

var swiper = new Swiper('.swiper-container',{
                    pagination:'.swiper-pagination',
                    grabCursor:true,
                    effect:'cube',  //翻页效果：方块
                    cube:{
                        shadow:true,
                        slideShadows:true,
                        shadowOffset:20,
                        shadowScale:0.94
                    }
                });

那么除了直接添加的属性意外，我们的翻页动画当中还有着自己的属性，就是这里

cube:{
                        shadow:true,   //阴影效果，如果设置为false下面的就不用
                        slideShadows:true,  //页面阴影效果
                        shadowOffset:20,  //阴影的偏移值
                        shadowScale:0.94  //阴影的大小
                    }

这样就实现了3D方块的翻页效果

发表评论取消回复

表情：

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

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

相关阅读

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

相关 3D翻页（智障版）

自己写了个很智障的翻页效果，纯属参考，也可以自己改进效果。 html,body{ height: 100%; width: 100%;

太过爱你忘了你带给我的痛/ 2022年05月09日 14:08/ 0 赞/ 148 阅读

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

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

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

相关 three.js 3D动画效果

> three.js <!DOCTYPE html> <html> <head> <meta charset="UTF-

古城微笑少年丶/ 2021年09月10日 11:36/ 0 赞/ 430 阅读