JS + CSS实现3 d切割轮播图的方法 - 行业资讯 - 肥雀云

　　介绍

这篇“JS + CSS实现3 d切割轮播图的方法”文章,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要参考一下,对于“JS + CSS实现3 d切割轮播图的方法”,小编整理了以下知识点,请大家跟着小编的步伐一步一步的慢慢理解,接下来就让我们进入主题吧。

CSS是什么意思

CSS是一种用来表现HTML或XML等文件样式的计算机语言,主要是用来设计网页的样式,使网页更加美化。它也是一种定义样式结构如字体,颜色,位置等的语言,并且CSS样式可以直接存储于HTML网页或者单独的样式单文件中,而样式规则的优先级由CSS根据这个层次结构决定,从而实现级联效果,发展至今,CSS不仅能装饰网页,也可以配合各种脚本对于网页进行格式化。

具体内容如下

<强>第一步:我们首先要通过CSS来完成一个基本布的局,利用传输格式:preserve-3d设置成3 d。

下面是CSS部分的代码

*, { 　　,保证金:0; 　　,填充:0; 　　,box-sizing: border-box; 　　｝　　li { 　　,list-style:没有; 　　｝/*,轮播图,*/.homePage { 　　,宽度:800 px; 　　,身高:200 px; 　　,保证金:150 px 汽车; 　　,背景颜色:粉色; 　　,位置:相对; 　　,/*溢出:隐藏。*/｝　　　　.homePage> ul { 　　,宽度:100%; 　　,高度:100%; 　　｝　　　　.homePage> ul> li { 　　,宽度:200 px; 　　,高度:100%; 　　,浮动:左; 　　,传输格式:preserve-3d; 　　,位置:相对; 　　,转型:all 1 s; 　　｝　　　　.homePage> ul> li> span { 　　,位置:绝对; 　　,上图:0; 　　,左:0; 　　,宽度:100%; 　　,高度:100%; 　　｝　　　　.homePage> ul> li>跨度:nth-child (1), { 　　,背景图片:url(. ./图片/bxqy.jpg); 　　,变换:translateZ (100 px); 　　｝　　.homePage> ul> li>跨度:nth-child (2), { 　　,背景图片:url(. ./图片/fczlm.jpg); 　　,变换:rotateX(90度),translateZ (100 px); 　　｝　　.homePage> ul> li>跨度:nth-child (3), { 　　,背景图片:url(. ./图片/hfh.jpg); 　　,变换:rotateX(180度),translateZ (100 px); 　　｝　　.homePage> ul> li>跨度:nth-child (4), { 　　,背景图片:url(. ./图片/ss.jpg); 　　,变换:rotateX(270度),translateZ (100 px); 　　｝/*,图片的定位,*/.homePage> ul>李:nth-child (2), span { 　　-200年,背景位置:px 0; 　　｝　　.homePage> ul>李:nth-child (3), span { 　　-400年,背景位置:px 0; 　　｝　　.homePage> ul>李:nth-child (4), span { 　　-600年,背景位置:px 0; 　　｝/*,小按钮,*/a { 　　,位置:绝对; 　　,宽度:30 px; 　　,身高:70 px; 　　,背景颜色:rgba (0, 0, 0, 0。2); 　　,文字修饰:没有; 　　,颜色:# fff; 　　,上图:50%; 　　,margin-top: -35 px; 　　,行高:70 px; 　　,text-align:中心; 　　,显示:没有; 　　｝　　.right { 　　,右:0; 　　}

<强>第二步:我们利用JS来调整图片运动时的切割速度以及方向。

下面是JS的代码。

$(函数(){ 　　,var index =, 0; 　　,var flag =,真的; 　　,var time =, setInterval(移动,,700); 　　　　,//下一张　　,function 移动(){ 　　,如果(!国旗),返回;=,flag 假; 　　,指数+ +; 　　,$ (“.homePage> ul> li") . css (“transform",“rotateX(“, +,(-90, *,指数),+,“度)“). each(函数(指数项){ 　　美元才能(项目). css (“transition-delay" index *, 0.2, +,“s"); 　　,}); 　　,} 　　　　,//移入移出　　,$ (“.homePage") .mouseenter(函数(){ 　　,clearInterval(时间); 　　,美元(“.homePage> a") . css (“display",“block"); 　　,}) 　　,$ (“.homePage") .mouseleave(函数(){=,,time setInterval(移动,,700); 　　,美元(“.homePage> a") . css (“display",“none"); 　　,}) 　　　　,//点击左边按钮:上一张　　,$ (“.left")。(“click",函数(){ 　　,如果(!国旗),返回;=,flag 假; 　　,指数——; 　　,$ (“.homePage> ul> li") . css (“transform",“rotateX(“, +,(-90, *,指数),+,“度)“). each(函数(指数项){ 　　美元才能(项目). css (“transition-delay" index *, 0.2, +,“s"); 　　,}); 　　,}) 　　　　,//点击有面按钮:下一张　　,$ (“.right") .click(移动); 　　　　,//动画整个过渡结束之后,transitionend过渡完成时触发　　,$(“李:last")。(“transitionend",函数(){=,flag 真实; 　　,}) 　　})

最后:身体区域代码如下