css html制做王者荣耀网站,css3配合js做王者荣耀3D旋转购买英雄效果以及源码展示...

展示gif效果图

注：为了让大家可以直接pc端复制粘贴代码，不用自己敲，这里直接给大家上代码了！

******里面js部分运用一些很牛的算法促使运动之后有运动痕迹，这样有用缓冲效果！

html:

css:

*{

margin:

0;

padding: 0;

list-style: none;

}

body{

background: #000;

}

#ul1{

width:133px;

height:247px;

position: absolute;

left:50%;

top:50%;

margin-left: -67px;

margin-top: -200px;

transform:perspective(800px) rotateX(-10deg);

transform-style: preserve-3d;

}

#ul1

li{

width:100%;

height:100%;

position: absolute;

left:0;

top:0;

background: url(img/1.jpg) no-repeat;

background-size:100%;

box-shadow: 0 0 20px #fff;

-webkit-box-reflect: below 10px

-webkit-linear-gradient(rgba(0,0,0,0) 40%, rgba(0,0,0,0.4));

}

javascript：

window.οnlοad=function(){

var

oUl=document.getElementByIdx_x('ul1');

var

N=11;

for(var

i=0; i

var

oLi=document.createElement_x('li');

oLi.style.backgroundImage='url(img/'+(i+1)+'.jpg)';

oUl.appendChild(oLi);

oLi.style.transition='.4s all ease '+(N-i)*200+'ms';

(function(oLi,i){

setTimeout(function(){

oLi.style.transform='rotateY('+360/N*i+'deg)

translateZ(300px)';

},0);

})(oLi,i);

}

//键盘控制

var

y=0;

var

x=-10;

var

aLi=oUl.children;

aLi[0].addEventListener('transitionend',function(){

change();

},false);

//拖拽

var

lastX=0;

var

lastY=0;

var

iSpeedX=0;

var

iSpeedY=0;

var

timer=null;

document.οnmοusedοwn=function(ev){

var

disX=ev.clientX-y;

var

disY=ev.clientY-x;

clearInterval(timer);

for(var

i=0; i

aLi[i].style.transition='none';

}

document.οnmοusemοve=function(ev){

y=ev.clientX-disX;

x=ev.clientY-disY;

change(y/3,x/3);

iSpeedX=ev.clientX-lastX;

iSpeedY=ev.clientY-lastY;

lastX=ev.clientX;

lastY=ev.clientY;

};

document.οnmοuseup=function(){

document.οnmοusemοve=null;

document.οnmοuseup=null;

timer=setInterval(function(){

iSpeedX*=0.95;

iSpeedY*=0.95;

y+=iSpeedX;

x+=iSpeedY;

change(y/3,x/3);

},30);

};

return

false;

};

function change(y,x){

for(var

i=0; i

//aLi[i].style.transition='1s all ease';

aLi[i].style.transform='rotateY('+(360/N*i+y)+'deg)

translateZ(300px)';

oUl.style.transform='perspective(800px) rotateX('+-x+'deg)';

var

scale=Math.abs(Math.abs((360/N*i+y)60)-180)/180;

scale<0.3 && (scale=0.3);

aLi[i].style.opacity=scale;

}

}

};