![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/08915ffca0be717bb78a8577d01df377.jpeg)
<!DOCTYPE html>
<html lang='en' onselectstart='return false'>
<head>
<meta charset='utf-8' />
<style>
li,
ul,
div,
html,
body{
margin: 0;
padding: 0;
}
html,
body{ height: 100% }
li{ list-style-type: none }
.wrap{
height: 100%;
overflow: hidden;
perspective: 800px;
}
#box{
top: 50%;
left: 50%;
width: 0;
height: 0;
position: relative;
transform-style: preserve-3d;
transform: translateZ(-1600px);
z-index: 1;
}
#box li{
top: -80px;
left: -60px;
width: 120px;
height: 160px;
position: absolute;
text-align: center;
line-height: 160px;
background-color: rgba(5,100,80,0.2);
border: 1px solid rgba(125,255,255,0.25);
box-shadow: 0 0 15px rgba(0,255,255,0.5);
cursor: pointer;
}
#box li span{
font-size: 28px;
font-weight: blod;
text-shadow: 2px 2px 5px black;
color: green;
}
.mask{
width: 100%;
height: 100%;
background: url('bg_mask.jpg') no-repeat center;
background-size: cover;
filter: blur(5px);
}
.mask > .bg-mask{
width: 100%;
height: 100%;
background: #000;
opacity: 0.25;
}
</style>
</head>
<body>
<div class="wrap">
<ul id="box"></ul>
<div class="mask">
<div class="bg-mask"></div>
</div>
</div>
<script src='jquery-2.2.4.js'></script>
<script>
(function(){
let
idx,
timer,
liElem,
spanElem,
currentStyle,
oldCoordX,
oldCoordY,
nowCoordX,
nowCoordY,
offsetStepX,
offsetStepY,
offsetStepZ,
liElemCoordX,
liElemCoordY,
liElemCoordZ,
minusX = 0,
minusY = 0,
liElemDegX = 0,
liElemDegY = 0,
liElemMaxNum = 162,
liElemRowMaxNum = 5,
liElemColMaxNum = 5,
liElemOffsetX = 350,
liElemOffsetY = 350,
liElemOffsetZ = 350,
liElemDepDefault = -1000,
depDefault = liElemDepDefault-600;
liElemDepZ = liElemDepDefault-600,
aScreenNum = liElemRowMaxNum*liElemColMaxNum,
liElemDepMaxDist = parseInt(liElemMaxNum/aScreenNum),
liElemFristSiteX = parseInt('-'+liElemRowMaxNum/2)*liElemOffsetX,
liElemFristSiteY = parseInt('-'+liElemColMaxNum/2)*liElemOffsetY,
liElemFristSiteZ = parseInt('-'+liElemDepMaxDist/2)*liElemOffsetZ,
data = ['Grid','Helix','Chaotic','Sphere','Three','Geome','Curve','Random'];
randomFrom = (lowerValue,upperValue) =>{
return Math.floor(Math.random()*(upperValue-lowerValue+1)+lowerValue);
}
gridLayout = _ =>{
let arr = [...Array(liElemMaxNum).keys()];
$('#box li').each(i =>{
let idx = randomFrom(0,arr.length-1);
offsetStepX = ((i%aScreenNum)%liElemRowMaxNum)*liElemOffsetX;
offsetStepY = parseInt((i%aScreenNum)/liElemColMaxNum)*liElemOffsetY;
offsetStepZ = parseInt(i/aScreenNum)*liElemOffsetZ;
liElemCoordX = liElemFristSiteX+offsetStepX;
liElemCoordY = liElemFristSiteY+offsetStepY;
liElemCoordZ = liElemFristSiteZ+offsetStepZ;
$('#box li').eq(arr[idx]).css({
"transform":`translate3d(${liElemCoordX}px,${liElemCoordY}px,${liElemCoordZ}px)`,
"transition": "4s ease-in-out"
})
arr.splice(idx,1);
}); currentStyle = gridLayout;
}
helixLayout = _ =>{
let arr = [...Array(liElemMaxNum).keys()];
$('#box li').each(i =>{
let idx = randomFrom(0,arr.length-1);
let liElemDegY = 10*i;
let liElemDepY = -10*parseInt(liElemMaxNum/2)+10*i;
$('#box li').eq(arr[idx]).css({
"transform":`rotateY(${liElemDegY}deg) translateY(${liElemDepY}px) translateZ(${Math.abs(liElemDepDefault)}px)`,
"transition": "4s ease-in-out"
})
arr.splice(idx,1)
}); currentStyle = helixLayout;
}
sphereLayout = _ =>{
let arr = [...Array(liElemMaxNum).keys()];
$('#box li').each(i =>{
let idx = randomFrom(0,arr.length-1);
let liElemDegY = 3*i;
let liElemDegX = 30*i;
$('#box li').eq(arr[idx]).css({
"transform":`rotateY(${liElemDegY}deg) rotateX(${liElemDegX}deg) translateZ(${Math.abs(liElemDepDefault)}px)`,
"transition": "4s ease-in-out"
})
arr.splice(idx,1)
}); currentStyle = sphereLayout;
}
threeLayout = _ =>{
let arr = [...Array(liElemMaxNum).keys()];
$('#box li').each(i =>{
let idx = randomFrom(0,arr.length-1);
let liElemDegY = 3*i;
let liElemDegX = 60*i;
$('#box li').eq(arr[idx]).css({
"transform":`rotateY(${liElemDegY}deg) rotateX(${liElemDegX}deg) translateZ(${Math.abs(liElemDepDefault)}px)`,
"transition": "4s ease-in-out"
})
arr.splice(idx,1)
}); currentStyle = threeLayout;
}
geomeLayout = _ =>{
let arr = [...Array(liElemMaxNum).keys()];
$('#box li').each(i =>{
let idx = randomFrom(0,arr.length-1);
let liElemDegY = 8.9*i;
let liElemDegX = 2.9*i;
$('#box li').eq(arr[idx]).css({
"transform":`rotateY(${liElemDegY}deg) rotateX(${liElemDegX}deg) translateZ(${Math.abs(liElemDepDefault)}px)`,
"transition": "4s ease-in-out"
})
arr.splice(idx,1)
}); currentStyle = geomeLayout;
}
curveLayout = _ =>{
let arr = [...Array(liElemMaxNum).keys()];
$('#box li').each(i =>{
let idx = randomFrom(0,arr.length-1);
let liElemDegY = 1*i;
let liElemDegX = 2*i;
$('#box li').eq(arr[idx]).css({
"transform":`rotateY(${liElemDegY}deg) rotateX(${liElemDegX}deg) translateZ(${liElemDepDefault}px)`,
"transition": "4s ease-in-out"
})
arr.splice(idx,1)
}); currentStyle = curveLayout;
}
chaoticLayout = _ =>{
$('#box li').each(function(i){
liElemCoordX = (Math.random()-0.5)*3000;
liElemCoordY = (Math.random()-0.5)*3000;
liElemCoordZ = (Math.random()-0.5)*3000;
$(this).css({
"transform":`translate3d(${liElemCoordX}px,${liElemCoordY}px,${liElemCoordZ}px)`,
"transition": "4s ease-in-out"
})
}); currentStyle = chaoticLayout;
}
function main(){
$([...Array(liElemMaxNum).keys()]).each(i =>{
liElem = $('<li></li>');
let idx = randomFrom(0,data.length-1);
spanElem = $(`<span>${data[idx]}</span>`);
liElem.append(spanElem);
spanElem.css('color',`rgb(${randomFrom(100,255)},${randomFrom(100,255)},${randomFrom(100,255)})`);
$('#box').append(liElem);
})
layoutStyle = [gridLayout, helixLayout, chaoticLayout, sphereLayout,
threeLayout, geomeLayout, curveLayout];
$('#box li').hover(function(){
$(this).css('border','1px solid rgba(125,255,255,0.75)');
$(this).css('boxShadow','0 0 15px rgba(0,255,255,0.75)');
$(this).css('transition','0s');
},function(){
$(this).css('border','1px solid rgba(125,255,255,0.25)');
$(this).css('boxShadow','0 0 15px rgba(0,255,255,0.5)');
$(this).css('transition','0s');
})
$('#box li').click(function(){
switch($(this).text()){
case 'Grid': gridLayout(); break;
case 'Helix': helixLayout(); break;
case 'Three': threeLayout(); break;
case 'Geome': geomeLayout(); break;
case 'Curve': curveLayout(); break;
case 'Sphere': sphereLayout(); break;
case 'Chaotic': chaoticLayout(); break;
default:
while(true){
idx = randomFrom(0,layoutStyle.length-1);
if(layoutStyle[idx] != currentStyle){
return layoutStyle[idx]();
}
}
break;
}
})
$(document).mousedown(function(event){
event = event || window.event;
oldCoordX = event.clientX;
oldCoordY = event.clientY;
$(this).on('mousemove',event =>{
event = event || window.event;
timer && clearInterval(timer);
nowCoordX = event.clientX;
nowCoordY = event.clientY;
minusX = nowCoordX - oldCoordX;
minusY = nowCoordY - oldCoordY;
oldCoordX = nowCoordX;
oldCoordY = nowCoordY;
liElemDegX -= minusY*0.1;
liElemDegY += minusX*0.1;
$('#box').css({
"transform":`translateZ(${liElemDepZ}px) rotateX(${liElemDegX}deg) rotateY(${liElemDegY}deg)`
})
}).mouseup(_ =>{
$(document).off('mousemove');
timer && clearInterval(timer);
timer = setInterval(_ => {
minusX *= 0.95;
minusY *= 0.95;
liElemDegX -= minusY*0.1;
liElemDegY += minusX*0.1;
Math.abs(minusX)<0.05
&& Math.abs(minusY)<0.05
&& clearInterval(timer);
$('#box').css({
"transform":`translateZ(${liElemDepZ}px) rotateX(${liElemDegX}deg) rotateY(${liElemDegY}deg)`
})
}, 12);
})
}).on('mousewheel DOMMouseScroll',e =>{
timer && clearInterval(timer);
let step = (e.originalEvent.wheelDelta
&& (e.originalEvent.wheelDelta >0?1:-1))
|| (e.originalEvent.detail && (e.originalEvent.detail >0?-1:1));
liElemDepZ = depDefault += step*90;
$('#box').css({
"transform":`translateZ(${liElemDepZ}px) rotateX(${liElemDegX}deg) rotateY(${liElemDegY}deg)`
})
timer = setInterval(_ => {
step *= 0.6;
liElemDepZ += step*80;
Math.abs(step) < 0.000005
&& clearInterval(timer);
$('#box').css({
"transform":`translateZ(${liElemDepZ}px) rotateX(${liElemDegX}deg) rotateY(${liElemDegY}deg)`
})
}, 12);
})
setTimeout(gridLayout,1000);
}
main();
})();
</script>
</body>
</html>