CSS异形轮播（3D动画）

来源：互联网发布：处理音频的软件编辑：程序博客网时间：2024/06/02 16:28
## CSS异形轮播（3D动画）##
<!DOCTYPE html><html><head>  <meta charset="utf-8">  <meta http-equiv="X-UA-Compatible" content="IE=edge">  <title></title>  <link rel="stylesheet" href="">  <style type="text/css">    *{        padding: 0 0;        margin: 0 0;    }    ul{        list-style: none;    }    .btn{        width: 20px;        height: 10px;        background: red;    }    .stage{        margin: 100px auto;        width: 560px;        height: 300px;        position: relative;        perspective: 3000px;        transform-style: preserve-3d;        transition: all 5s;    }    .stage>ul li {        position: absolute;        top: 0px;        left: 0px;        transition: all 2s;    }    .stage ul{        perspective: 300px;    }    .no1{        transform: translateX(-470px) scale(0.2);        display: none;    }    .no5{        transform: translateX(470px) scale(0.2);        display: none;    }    .no2{        transform: rotateY(20deg) scale(0.8) translateZ(-100px) translateX(-160px);        z-index: 10;    }    .no4{transform: rotateY(-20deg) scale(0.8) translateZ(-100px) translateX(160px);        z-index: 10;    }    .no3{transform:  scale(0.9);z-index: 20;}  </style>  <script type="text/javascript">    window.onload=function(){      var ul=document.getElementById("ul");      var lis=document.getElementById("ul").getElementsByTagName("li")      var btn=document.getElementById("btn");      var arr=["no1","no2","no3","no4","no5"];      var lock=true;      btn.onclick=function(){        if(lock===true){          var lastOne=arr.pop()        arr.unshift(lastOne)        for(var i=0;i<lis.length;i++){          lis[i].className=arr[i]        }          lock=false;          setTimeout(function(){           lock=true;          },1200);        }      }    }  </script></head><body><bottom id="btn">按钮</bottom>  <div class="stage">    <ul id="ul">      <li class="no1"><img src="1.jpg" alt="" /></li>      <li class="no2"><img src="2.jpg" alt="" /></li>      <li class="no3"><img src="3.jpg" alt="" /></li>      <li class="no4"><img src="4.jpg" alt="" /></li>      <li class="no5"><img src="5.jpg" alt="" /></li>    </ul>         </div> </body></html>
图片：
1.jpg

2 .jpg

3.jpg

4 .jpg

5.jpg
0 0