CSS3如何制作轮播图切割效果

这篇文章主要介绍CSS3如何制作轮播图切割效果，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！ 炫酷CSS3切割效果轮播图 炫酷CSS3切割效果轮播图” /> 炫酷,CSS3,切割效果,轮播图” /> 代码” /> 代码” />

html,body,div{ margin: 0; padding: 0; } body{background-color: #232323} .slider-outer{ width: 560px; height: 300px; margin: 150px auto; background-color: #f60; position: relative; } .img-item{ position: absolute; width: 112px; height: 100%; background-color: #f10; transition: all 1.5s; /*设置子元素在3D空间中呈现*/ transform-style: preserve-3d; } /*让图片可以构成一个有四个面的长方体 start*/ .img{ width: 100%; height: 100%; position: absolute; background-size: cover; } .img:nth-child(1){ background: url(images/1.png) no-repeat; transform: rotateX(0deg) translateZ(150px); } .img:nth-child(2){ background: url(images/2.png) no-repeat; transform: rotateX(-90deg) translateZ(150px); } .img:nth-child(3){ background: url(images/3.png) no-repeat; transform: rotateX(-180deg) translateZ(150px); } .img:nth-child(4){ background: url(images/4.png) no-repeat; transform: rotateX(-270deg) translateZ(150px); } /*让图片可以构成一个有四个面的长方体 end*/ .btns{ position: absolute; top: 50%; width: 100%; height: 70px; margin-top: -35px; } .prev, .next{ width: 70px; height: 70px; line-height: 70px; text-align: center; background-color: rgba(0,0,0,.3); color: #fff; font-size: 30px; cursor: pointer; position: absolute; } .prev{ left: 0; } .next{ right: 0; } $(function (){ var num = 0; $(“#j_silder_outer .img-item”).each(function(index, el) { $(this).css({ “left”:$(this).width() * index + “px”, /*让每个img-item延时一定时间执行动画*/ “transitionDelay”: index * 0.3 + “s” }); $(this).find(“.img”).css({ “backgroundPosition”: -$(this).width() * index + “px” });; }); $(“.prev”).on(“click”,function (){ $(“#j_silder_outer .img-item”).css(“transform”, “rotateX(” + (++num * 90) + “deg)”); }); $(“.next”).on(“click”,function (){ $(“#j_silder_outer .img-item”).css(“transform”, “rotateX(” + (–num * 90) + “deg)”); }); var timejg=4000;//轮播间隔时间 var time = setInterval(move,timejg); function move(){ $(“#j_silder_outer .img-item”).css(“transform”, “rotateX(” + (–num * 90) + “deg)”); } $(‘.slider-outer’).hover(function(){ clearInterval(time); },function(){ time = setInterval(move,timejg); }); })

以上是“CSS3如何制作轮播图切割效果”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注百云主机行业资讯频道！免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@byun.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。

相关推荐: PS怎么实现拼图

这篇文章将为大家详细讲解有关PS怎么实现拼图，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。 　　1：打开Photoshop CS5软件，将我们的找好的图片拉至作图区域，将图片作为背景图层导入到软件中。拉动背景图层至【新建图层…