特效介绍
![](/uploads/allimg/210304/1-210304143T80-L.png)
基于js+CSS3的类似帆船帆板翻转的图片轮播代码,每张图片都会从中间“裂开”,然后“碎成”帆船帆板一样,有次序的从一张张反转过去,显示为下一张或上一张,而且,是3D效果,有厚度,有质量。
上一张、下一张按钮没有进行美化,如果使用的话,适当改改css,美化下效果更好。当然,作为学习,查看如何实现的,也非常不错,因为没有引入任何库文件,非常“纯净”。
使用方法
1、在代码中加入下面的css:
#box { position: relative; width: 1050px; height: 360px; margin: 100px auto 10px; } #box ul li { position: absolute; left: 0; top: 0; width: 1050px; height: 360px; display: none; } #show { position: absolute; left: 0; top: 0; width: 1050px; height: 360px; perspective: 800px; display: none; } #show div { position: relative; width: 525px; height: 72px; float: left; transform-style: preserve-3d; } #show div em { position: absolute; left: 0; top: 0; display: block; width: 525px; height: 72px; } #show div .em1 { /*前面*/ background: url("img/1.png"); transform: translateX(5px); } #show div .em2 { /*后面*/ background: url("img/2.png"); transform: translateZ(-5px) rotateX(-180deg); } #show div span { position: absolute; right: 0; bottom: 0; background-color: #999; } #show div span.span1 { width: 10px; height: 72px; transform-origin: right; transform: translateZ(-5px) rotateY(-90deg); } #show div span.span2 { width: 525px; height: 10px; transform-origin: bottom; transform: translateZ(-5px) rotateX(-90deg); } #show div.div2 .span1 { left: 0; transform-origin: left; transform: translateZ(5px) rotateY(90deg); } /*规定左前动画旋转特效*/ @keyframes move1{ 0%{ transform: rotateX(0deg) rotateZ(0deg) rotateY(0deg); animation-timing-function: ease;/*运动速度曲线*/ } 60%{ transform: rotateX(0deg) rotateZ(0deg) rotateY(-60deg); animation-timing-function: ease-in;/*运动速度曲线*/ } 80%{ transform: rotateX(90deg) rotateZ(10deg) rotateY(-45deg); animation-timing-function: ease-out;/*运动速度曲线*/ } 100%{ transform: rotateX(180deg) rotateZ(0deg) rotateY(0deg); } } @keyframes move2{ 0%{ transform: rotateX(0deg) rotateZ(0deg) rotateY(0deg); animation-timing-function: ease;/*运动速度曲线*/ } 60%{ transform: rotateX(0deg) rotateZ(0deg) rotateY(60deg); animation-timing-function: ease-in;/*运动速度曲线*/ } 80%{ transform: rotateX(90deg) rotateZ(-10deg) rotateY(45deg); animation-timing-function: ease-out;/*运动速度曲线*/ } 100%{ transform: rotateX(180deg) rotateZ(0deg) rotateY(0deg); } }2、html:
<div id="box"> <ul> <li><img src="img/1.png" alt="pho"/></li> <li><img src="img/2.png" alt="pho"/></li> <li><img src="img/3.png" alt="pho"/></li> <li><img src="img/4.png" alt="pho"/></li> <li><img src="img/5.png" alt="pho"/></li> </ul> <div id="show"></div> </div> <input type="button" id="prev" value="上一张"/> <input type="button" id="next" value="下一张"/>3、js代码:
var oShow = document.getElementById("show"); var oBox = document.getElementById('box'); var prev = document.getElementById("prev"); var next = document.getElementById("next"); var oLi = oBox.getElementsByTagName("ul")[0].getElementsByTagName("li"); var oImg = oBox.getElementsByTagName("ul")[0].getElementsByTagName("img"); oShow.iNow = 0; oShow.urls = []; /*当前背景 给oshow对象添加一个自定义属性保存当前显示的图片*/ oShow.off = false; /*保存图片路径*/ for (var i = 0; i < 5; i++) { var oDiv1 = document.createElement("div"); var oDiv2 = document.createElement("div"); oDiv2.className = "div2"; oDiv1.innerHTML = "<em class='em1' style='background-position: 0-" + i * 72 + "px'></em><span class='span1'></span>" + "<em class='em2' style='background-position: 0-" + i * 72 + "px'></em><span class='span2'></span>"; oDiv2.innerHTML = "<em class='em1' style='background-position: -525px+" + (5 - i) * 72 + "px'></em><span class='span1'></span>" + "<em class='em2' style='background-position: -525px+" + (5 - i) * 72 + "px'></em><span class='span2'></span>"; oShow.appendChild(oDiv1); oShow.appendChild(oDiv2); } oLi[0].style.display = "block"; /***********/ //获取图片 for (var i = 0; i < oImg.length; i++) { oShow.urls.push(oImg[i].getAttribute("src")); } prev.onclick = function () { if(oShow.off){ return; // } oShow.off = true; var iNext = oShow.iNow - 1; if (iNext < 0) { iNext = oShow.urls.length - 1; } tab(iNext);//切换图片 }; next.onclick = function () { if(oShow.off){ return; // } oShow.off = true; var iNext = oShow.iNow + 1; if (iNext >= oShow.urls.length) { iNext = 0; } tab(iNext);//切换图片 }; function tab(iNext) { var oEm1 = oShow.getElementsByClassName("em1"); var oEm2 = oShow.getElementsByClassName("em2"); var oDiv = oShow.getElementsByTagName("div"); for (var i = 0; i < oEm1.length; i++) { //当前的这一张 oEm1[i].style.backgroundImage = "url(" + oShow.urls[oShow.iNow] + ")"; //后面的哪一张 oEm2[i].style.backgroundImage = "url(" + oShow.urls[iNext] + ")"; } oShow.style.display = "block"; oLi[oShow.iNow].style.display = "none"; //给具体的十个div绑定定时器 实现旋转效果 for (var i = 0; i < oDiv.length; i+=2) { var time = (i+1)*50; oDiv[i].style.transform = "rotateX(0deg)";//左边 oDiv[i + 1].style.transform = "rotateX(0deg)";//右边 //具体每个div绑定定时器 setTimer(oDiv[i], time,"move1"); setTimer(oDiv[i + 1], time,"move2") } //动画执行完成之后 setTimeout(function(){ oShow.iNow = iNext; oLi[oShow.iNow].style.display = "block";///inext.inow oShow.style.display = "none"; oShow.off = false; },(oDiv.length*50+1500)) } function setTimer(obj,time,name){ obj.timer = setTimeout(function(){ //开启定时器之前先清除定时器 clearTimeout(obj.timer); obj.style.animation = name + " 1.5s"; obj.style.transform = "rotateX(180deg)"; obj.timer = setTimeout(function(){ obj.style.animation = ""; clearTimeout(obj.timer); obj.timer = null; },1500); },time) }