先上效果圖
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } #content{ width: 500px; height: 300px; margin: 40px auto; position: relative; transform-style: preserve-3d; } #content>div{ width: 100%; height: 100%; position: absolute; transform-origin: center bottom; } #content img{ width: 100%; height: 100%; } #next{ position: absolute; top:190px; left: calc(33% - 60px); } #prev{ position: absolute; top: 190px; left: calc(68% + 30px); } @keyframes next{ //創(chuàng)建一個動畫這是一個翻到下面的效果 from{ -wbelit-transform: perspective(1000px) rotateX(0deg); /* 開始位置是 0°*/ opacity: 1; //初始透明為1 } to{ -webkit-transform: perspective(1000px) rotateX(-180deg); /*結(jié)束位置是 180°*/ opacity: 0; //結(jié)束透明為0 } } @keyframes prev{ //創(chuàng)建一個由上邊翻到上邊的動畫 0%{ -webkit-transform: perspective(1000px) rotateX(180deg); /* 初始開始位置 */ opacity:0; //初始為透明 } 57% { -webkit-transform: perspective(1000px) rotateX(-16deg); /* 動畫進行到 56% 的時候他為 -16° */ opacity:1; //透明已經(jīng)為1 了 } 66% { -webkit-transform: perspective(1000px) rotateX(14deg); /* 再回到 14° 的位置 */ } 74% { -webkit-transform: perspective(1000px) rotateX(-12deg); /* 再回到 -12°的位置 */ } 81% { -webkit-transform: perspective(1000px) rotateX(10deg); /* 再回到 10°的位置 */ } 87% { -webkit-transform: perspective(1000px) rotateX(-8deg); /* 再回到 -8°的位置 */ } 92% { -webkit-transform: perspective(1000px) rotateX(6deg); /* 再回到 6° 的位置 */ } 96% { -webkit-transform: perspective(1000px) rotateX(-4deg); /* 再回到 -4° 的位置 */ } 100% { -webkit-transform: perspective(1000px) rotateX(0deg); /* 最后回歸 0° */ }<br> } .next{ animation: next 1s ease 1 normal 0s; /* 執(zhí)行向下的動畫 */ transform: rotateX(-180deg); /* 因為初始位置是0 但當(dāng)你執(zhí)行完動畫還會回到原位 所以它轉(zhuǎn)到哪里就把他設(shè)在哪里不要再讓它回去了 */ opacity: 0; } .prev{ animation: prev 1.2s ease 1 normal 0s; /* 執(zhí)行向上的動畫 */ transform: rotateX(0deg); /* 同上 */ opacity: 1; } </style> </head> <body> <button id="next">←</button><button id="prev">→</button> <div id="content"> <div class="prev"><img src="images/012.jpeg"></div> <!-- 設(shè)置默認(rèn)的第一頁 --> <div class="next"><img src="images/017.jpeg"></div> <div class="next"><img src="images/020.jpeg"></div> <div class="next"><img src="images/027.jpeg"></div> <div class="next"><img src="images/0df3d7ca7bcb0a46ce09bc1e6e63f6246b60afe9.jpg"></div> </div> <script> window.onload=function(){ var next=document.getElementById("next"); var prev=document.getElementById("prev"); var content=document.getElementById("content"); var oDiv=content.getElementsByTagName("div"); var x=0; next.onclick=function(){ //當(dāng)向下翻頁時 oDiv[x].setAttribute("class","next"); //第一個頁 設(shè)置class名讓他向下走去 x++ if(x>oDiv.length-1){ x=0 } oDiv[x].setAttribute("class","prev"); //++過后讓他的下一個頁面起來 } prev.onclick=function(){ //同上只是++變-- oDiv[x].setAttribute("class","next"); x-- if(x<0){ x=oDiv.length-1 } oDiv[x].setAttribute("class","prev"); } } </script> </body></html>以上所述是小編給大家介紹的CSS3+JavaScript實現(xiàn)翻頁幻燈片效果，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對武林網(wǎng)網(wǎng)站的支持！
新聞熱點
疑難解答
