An animation like light card

来源：互联网发布：什么是creis中指数据编辑：程序博客网时间：2024/05/29 02:34
Talk is cheap, note is there , show you code.
<!DOCTYPE html><html>    <head>        <title></title>        <meta charset="utf-8" />        <style media="screen">            body{                background-color: #000;            }            #wrap{                position: relative;                /*the img size and make it get center*/                width: 130px;                height: 200px;                margin: 150px auto;                transform-style: preserve-3d;                /*perspective: 1000px;*/        /*make the whole items of wrap rotate by the axis */        /*perspective, which between 800 and 1000 seems better.*/                transform: perspective(1000px) rotateX(-10deg) rotateY(0deg);            }            #wrap>div{                position: absolute;        transition:1s;            }            #wrap img{                /*delete the break between img*/                vertical-align: middle;                /*x-offset y-offset spread-offset color*/                box-shadow: 0 0 10px #fff;            }      /*the inverted img was created*/            #wrap div div{                height: 200px;                margin-top: 10px;                /*reverse by y axis */                transform: scale(1,-1);                background: linear-gradient(rgb(0,0,0) 40%,rgba(0,0,0,0)),url(img/10.jpg);            }      #wrap span{        display: block;        width:1200px;        height:1200px;        position: absolute;        /*center span*/        left:50%;        top:50%;        margin-left:-600px;        margin-top:-600px;        background: radial-gradient(rgb(50,50,50), rgba(0,0,0,0) 70%);        transform: translateY(110px) rotateX(90deg);      }        </style>    <script >      window.onload=function () {        let wrap=document.getElementById("wrap");        let divs=document.querySelectorAll("#wrap>div");        let refs=document.querySelectorAll("#wrap div div");        let rotate=360/divs.length;        for(let i=0;i<divs.length;i++){//          the inverted img          refs[i].style.background='linear-gradient(rgb(0,0,0) 40%,rgba(0,0,0,0)),url(img/'+(i+1)+'.jpg)';//          anonymous function and closure          (function(i){            setTimeout(function(){//                After 2000, 1800, 1600 ... seconds to run transform(1s)//                The first page was last runner              divs[i].style.transform='rotateY('+i*rotate+'deg) translateZ(400px)';            },(divs.length-i)*200);          })(i);        }//      When the fist img was run at the end position        divs[0].addEventListener('transitionend',function(){          drag();        });        function drag(){          let curX=0;           //init circle value          let curY=-10;     //init circle value          let timer;          document.onmousedown=function(ev){            clearInterval(timer);            let startTime=new Date().getTime();     //when you mouse down            let disX=ev.clientX;    //the start point            let disY=ev.clientY;    //the start point            /*             * Last stop point             * Every mouse down need set the lastXY             */            let lastX=curX;            let lastY=curY;            /*note the speed*/            let speedX=0;            let speedY=0;            document.onmousemove=function(ev){              curX=lastX+(ev.clientX-disX)/10;              curY=lastY+(disY-ev.clientY)/10;              wrap.style.transform='perspective(1000px) rotateX('+curY+'deg) rotateY('+curX+'deg)';              //drag distance by the mouse move distance              //so you need calc the              speedX=(ev.clientX-disX)/100;              speedY=(disY-ev.clientY)/100;            };            document.onmouseup=function(){              document.onmousemove=null;              let endTime=new Date().getTime();         //note the mouse up time              if(endTime-startTime<300){                timer=setInterval(function(){                  curX+=speedX;                  curY+=speedY;                  //friction force                  speedX*=0.95;                  speedY*=0.95;                  //stop condition                  if(Math.abs(speedX)<0.1 && Math.abs(speedY)<0.1){                    clearInterval(timer);                  }                  wrap.style.transform='perspective(1000px) rotateX('+curY+'deg) rotateY('+curX+'deg)';                },16);              }            };            return false;          };        }      }    </script>    </head>    <body>        <div id="wrap">            <div><img src="img/1.jpg" />                <div>                </div>            </div>            <div><img src="img/2.jpg" />                <div >                </div>            </div>            <div><img src="img/3.jpg" />                <div >                </div>            </div>            <div><img src="img/4.jpg" />                <div>                </div>            </div>            <div><img src="img/5.jpg" />                <div>                </div>            </div>            <div><img src="img/6.jpg" />                <div>                </div>            </div>            <div><img src="img/7.jpg" />                <div>                </div>            </div>            <div><img src="img/8.jpg" />                <div>                </div>            </div>            <div><img src="img/9.jpg" />                <div>                </div>            </div>            <div><img src="img/10.jpg" />                <div>                </div>            </div>      <span></span>        </div>    </body></html>
阅读全文
0 0