<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>“造”了一台电脑</title>
<style>
*,*::after,*::before{margin:0;padding:0;box-sizing:border-box;transform-style:preserve-3d;}body{width:100%;height:100vh;display:flex;justify-content:center;align-items:center;background-color:#1a1919;overflow:hidden;font-family:sans-serif;font-weight:bolder;color:rgba(255,255,251,0.7);text-transform:uppercase;letter-spacing:2px;}.main{width:800px;height:600px;position:relative;cursor:pointer;margin-top:200px;}@media (max-width:1000px){.main{transform:scale(0.75);}}@media (max-width:800px){.main{transform:scale(0.5);}}@media (max-width:700px){.main{transform:scale(0.4);}}@media (max-width:500px){.main{transform:scale(0.3);}}.flex{display:flex;justify-content:center;align-items:center;}.face{position:absolute;}.screen{width:303.0303030303px;height:240px;transform:translateZ(100px) translateY(-200px) translateZ(50px)
rotateX(270deg);background-color:#a9dffd;border-radius:10px;box-shadow:0 0 5px rgba(169,223,253,0.8),0 0 10px rgba(169,223,253,0.7),0 0 15px rgba(169,223,253,0.6),0 0 20px rgba(169,223,253,0.5),0 0 40px rgba(169,223,253,0.4),0 0 60px rgba(169,223,253,0.3);animation:screen 1s ease-in alternate infinite;}.keyboard{width:500px;height:160px;transform:perspective(10000px) rotateX(50deg) rotateZ(-25deg);}.keyboard__front{width:500px;height:25px;transform:rotateX(-90deg) translateZ(80px);background-color:#9c9c9c;}.keyboard__back{width:500px;height:25px;transform:rotateX(90deg) translateZ(80px);background-color:#fffffb;}.keyboard__top{display:flex;flex-direction:column;justify-content:space-around;width:500px;height:160px;transform:rotateY(0deg) translateZ(12.5px);background-image:linear-gradient(to bottom,#dbf2fe,#343232);}.keyboard__bottom{width:500px;height:160px;transform:rotateY(180deg) translateZ(12.5px);background-color:#eae7e5;box-shadow:-20px 40px 0 #0d0c0c,0px 40px 0 #0d0c0c,5px 0px 0 #0d0c0c,5px 40px 0 #0d0c0c;}.keyboard__right{width:25px;height:160px;transform:rotateY(90deg) translateZ(250px);background-color:#fffffb;}.keyboard__left{width:25px;height:160px;transform:rotateY(90deg) translateZ(-250px);background-color:#eae7e5;}.keys{display:flex;justify-content:space-between;flex-wrap:wrap;width:100%;transform:translateZ(7.5px);padding:0 2px;}.key{width:30px;height:27px;transition:0.05s ease;}.key--w2{width:60px;}.key--w3{width:90px;}.key--w6{width:195px;}.key__front{width:30px;height:15px;transform:rotateX(-90deg) translateZ(13.5px);background-color:#838383;}.key__front--w2{width:60px;}.key__front--w3{width:90px;}.key__front--w6{width:195px;}.key__back{width:30px;height:15px;transform:rotateX(90deg) translateZ(13.5px);background-color:#fffffb;}.key__back--w2{width:60px;}.key__back--w3{width:90px;}.key__back--w6{width:195px;}.key__top{width:30px;height:27px;transform:rotateY(0deg) translateZ(7.5px);background-color:#fffffb;background-image:linear-gradient(to bottom,#f4fbff,#fffffb);}.key__top--w2{width:60px;}.key__top--w3{width:90px;}.key__top--w6{width:195px;}.key__bottom{width:30px;height:27px;transform:rotateY(180deg) translateZ(7.5px);background-color:#838383;}.key__bottom--w2{width:60px;}.key__bottom--w3{width:90px;}.key__bottom--w6{width:195px;}.key__right{width:15px;height:27px;transform:rotateY(90deg) translateZ(15px);background-color:#838383;}.key__right--w2{transform:rotateY(90deg) translateZ(30px);}.key__right--w3{transform:rotateY(90deg) translateZ(45px);}.key__right--w6{transform:rotateY(90deg) translateZ(97.5px);}.key__left{width:15px;height:27px;transform:rotateY(90deg) translateZ(-15px);background-image:linear-gradient(to bottom,#c5c5c5,#b8b8b8);}.key__left--w2{transform:rotateY(90deg) translateZ(-30px);}.key__left--w3{transform:rotateY(90deg) translateZ(-45px);}.key__left--w6{transform:rotateY(90deg) translateZ(-97.5px);}.face--key-b1{background:#a9dffd;}.face--key-b2{background-image:linear-gradient(to bottom,#a7dcfa,#8fd2f8);}.face--key-b3{background-color:#426585;}.face--key-o1{background:#ffa28e;}.face--key-o2{background-image:linear-gradient(to bottom,#bc7377,#b46266);}.face--key-o3{background-color:#8e3e43;}.key--down{display:flex;justify-content:center;align-items:center;transform:translateZ(-5px);transition:0.05s ease;}.key--down > .key__top{background:#ffccc1;}@keyframes screen{0%,90%,96%{background-color:#a9dffd;}93%,100%{background-color:rgba(143,210,248,0.8);}}</style>
</head>
<body>
<div class="main flex"id="m"><div class="keyboard flex"id="k"><div class="screen flex"id="s"></div><div class="keyboard__front face"></div><div class="keyboard__back face"></div><div class="keyboard__right face"></div><div class="keyboard__left face"></div><div class="keyboard__top face"><div class="keys"><div class="key flex"><div class="key__front face face--key-b3"></div><div class="key__back face face--key-b1"></div><div class="key__right face face--key-b1"></div><div class="key__left face face--key-b2"></div><div class="key__top face face--key-b1"></div><div class="key__bottom face face--key-b2"></div></div><div class="key flex"><div class="key__front face"></div><div class="key__back face"></div><div class="key__right face"></div><div class="key__left face"></div><div class="key__top face"></div><div class="key__bottom face"></div></div><div class="key flex"><div class="key__front face"></div><div class="key__back face"></div><div class="key__right face"></div><div class="key__left face"></div><div class="key__top face"></div><div class="key__bottom face"></div></div><div class="key flex"><div class="key__front face"></div><div class="key__back face"></div><div class="key__right face"></div><div class="key__left face"></div><div class="key__top face"></div><div class="key__bottom face"></div></div><div class="key flex"><div class="key__front face"></div><div class="key__back face"></div><div class="key__right face"></div><div class="key__left face"></div><div class="key__top face"></div><div class="key__bottom face"></div></div><div class="key flex"><div class="key__front face"></div><div class="key__back face"></div><div class="key__right face"></div><div class="key__left face"></div><div class="key__top face"></div><div class="key__bottom face"></div></div><div class="key flex"><div class="key__front face"></div><div class="key__back face"></div><div class="key__right face"></div><div class="key__left face"></div><div class="key__top face"></div><div class="key__bottom face"></div></div><div class="key flex"><div class="key__front face"></div><div class="key__back face"></div><div class="key__right face"></div><div class="key__left face"></div><div class="key__top face"></div><div class="key__bottom face"></div></div><div class="key flex"><div class="key__front face"></div><div class="key__back face"></div><div class="key__right face"></div><div class="key__left face"></div><div class="key__top face"></div><div class="key__bottom face"></div></div><div class="key flex"><div class="key__front face"></div><div class="key__back face"></div><div class="key__right face"></div><div class="key__left face"></div><div class="key__top face"></div><div class="key__bottom face"></div></div><div class="key flex"><div class="key__front face"></div><div class="key__back face"></div><div class="key__right face"></div><div class="key__left face"></div><div class="key__top face"></div><div class="key__bottom face"></div></div><div class="key flex"><div class="key__front face"></div><div class="key__back face"></div><div class="key__right face"></div><div class="key__left face"></div><div class="key__top face"></div><div class="key__bottom face"></div></div><div class="key flex"><div class="key__front face"></div><div class="key__back face"></div><div class="key__right face"></div><div class="key__left face"></div><div class="key__top face"></div><div class="key__bottom face"></div></div><div class="key key--w2 flex"><div class="key__front key__front--w2 face face--key-b3"></div><div class="key__back key__back--w2 face face--key-b1"></div><div class="key__right key__right--w2 face face--key-b1"></div><div class="key__left key__left--w2 face face--key-b2"></div><div class="key__top key__top--w2 face face--key-b1"></div><div class="key__bottom key__bottom--w2 face face--key-b2"></div></div></div><div class="keys"><div class="key key--w2 flex"><div class="key__front key__front--w2 face face--key-b3"></div><div class="key__back key__back--w2 face face--key-b1"></div><div class="key__right key__right--w2 face face--key-b1"></div><div class="key__left key__left--w2 face face--key-b2"></div><div class="key__top key__top--w2 face face--key-b1"></div><div class="key__bottom key__bottom--w2 face face--key-b2"></div></div><div class="key flex"><div class="key__front face"></div><div class="key__back face"></div><div class="key__right face"></div><div class="key__left face"></div><div class="key__top face"></div><div class="key__bottom face"></div></div><div class="key flex"><div class="key__front face"></div><div class="key__back face"></div><div class="key__right face"></div><div class="key__left face"></div><div class="key__top face"></div><div class="key__bottom face"></div></div><div class="key flex"><div class="key__front face"></div><div class="key__back face"></div><div class="key__right face"></div><div class="key__left face"></div><div class="key__top face"></div><div class="key__bottom face"></div></div><div class="key flex"><div class="key__front face"></div><div class="key__back face"></div><div class="key__right face"></div><div class="key__left face"></div><div class="key__top face"></div><div class="key__bottom face"></div></div><div class="key flex"><div class="key__front face"></div><div class="key__back face"></div><div class="key__right face"></div><div class="key__left face"></div><div class="key__top face"></div><div class="key__bottom face"></div></div><div class="key flex"><div class="key__front face"></div><div class="key__back face"></div><div class="key__right face"></div><div class="key__left face"></div><div class="key__top face"></div><div class="key__bottom face"></div></div><div class="key flex"><div class="key__front face"></div><div class="key__back face"></div><div class="key__right face"></div><div class="key__left face"></div><div class="key__top face"></div><div class="key__bottom face"></div></div><div class="key flex"><div class="key__front face"></div><div class="key__back face"></div><div class="key__right face"></div><div class="key__left face"></div><div class="key__top face"></div><div class="key__bottom face"></div></div><div class="key flex"><div class="key__front face"></div><div class="key__back face"></div><div class="key__right face"></div><div class="key__left face"></div><div class="key__top face"></div><div class="key__bottom face"></div></div><div class="key flex"><div class="key__front face"></div><div class="key__back face"></div><div class="key__right face"></div><div class="key__left face"></div><div class="key__top face"></div><div class="key__bottom face"></div></div><div class="key flex"><div class="key__front face"></div><div class="key__back face"></div><div class="key__right face"></div><div class="key__left face"></div><div class="key__top face"></div><div class="key__bottom face"></div></div><div class="key flex"><div class="key__front face"></div><div class="key__back face"></div><div class="key__right face"></div><div class="key__left face"></div><div class="key__top face"></div><div class="key__bottom face"></div></div><div class="key flex"><div class="key__front face face--key-b3"></div><div class="key__back face face--key-b1"></div><div class="key__right face face--key-b1"></div><div class="key__left face face--key-b2"></div><div class="key__top face face--key-b1"></div><div class="key__bottom face face--key-b2"></div></div></div><div class="keys"><div class="key key--w3 flex"><div class="key__front key__front--w3 face face--key-b3"></div><div class="key__back key__back--w3 face face--key-b1"></div><div class="key__right key__right--w3 face face--key-b1"></div><div class="key__left key__left--w3 face face--key-b2"></div><div class="key__top key__top--w3 face face--key-b1"></div><div class="key__bottom key__bottom--w3 face face--key-b2"></div></div><div class="key flex"><div class="key__front face"></div><div class="key__back face"></div><div class="key__right face"></div><div class="key__left face"></div><div class="key__top face"></div><div class="key__bottom face"></div></div><div class="key flex"><div class="key__front face"></div><div class="key__back face"></div><div class="key__right face"></div><div class="key__left face"></div><div class="key__top face"></div><div class="key__bottom face"></div></div><div class="key flex"><div class="key__front face"></div><div class="key__back face"></div><div class="key__right face"></div><div class="key__left face"></div><div class="key__top face"></div><div class="key__bottom face"></div></div><div class="key flex"><div class="key__front face"></div><div class="key__back face"></div><div class="key__right face"></div><div class="key__left face"></div><div class="key__top face"></div><div class="key__bottom face"></div></div><div class="key flex"><div class="key__front face"></div><div class="key__back face"></div><div class="key__right face"></div><div class="key__left face"></div><div class="key__top face"></div><div class="key__bottom face"></div></div><div class="key flex"><div class="key__front face"></div><div class="key__back face"></div><div class="key__right face"></div><div class="key__left face"></div><div class="key__top face"></div><div class="key__bottom face"></div></div><div class="key flex"><div class="key__front face"></div><div class="key__back face"></div><div class="key__right face"></div><div class="key__left face"></div><div class="key__top face"></div><div class="key__bottom face"></div></div><div class="key flex"><div class="key__front face"></div><div class="key__back face"></div><div class="key__right face"></div><div class="key__left face"></div><div class="key__top face"></div><div class="key__bottom face"></div></div><div class="key flex"><div class="key__front face"></div><div class="key__back face"></div><div class="key__right face"></div><div class="key__left face"></div><div class="key__top face"></div><div class="key__bottom face"></div></div><div class="key flex"><div class="key__front face"></div><div class="key__back face"></div><div class="key__right face"></div><div class="key__left face"></div><div class="key__top face"></div><div class="key__bottom face"></div></div><div class="key key--w2 flex"><div class="key__front key__front--w2 face face--key-o3"></div><div class="key__back key__back--w2 face face--key-o1"></div><div class="key__right key__right--w2 face face--key-o1"></div><div class="key__left key__left--w2 face face--key-o2"></div><div class="key__top key__top--w2 face face--key-o1"></div><div class="key__bottom key__bottom--w2 face face--key-o2"></div></div></div><div class="keys"><div class="key key--w2 flex"><div class="key__front key__front--w2 face face--key-b3"></div><div class="key__back key__back--w2 face face--key-b1"></div><div class="key__right key__right--w2 face face--key-b1"></div><div class="key__left key__left--w2 face face--key-b2"></div><div class="key__top key__top--w2 face face--key-b1"></div><div class="key__bottom key__bottom--w2 face face--key-b2"></div></div><div class="key flex"><div class="key__front face"></div><div class="key__back face"></div><div class="key__right face"></div><div class="key__left face"></div><div class="key__top face"></div><div class="key__bottom face"></div></div><div class="key flex"><div class="key__front face"></div><div class="key__back face"></div><div class="key__right face"></div><div class="key__left face"></div><div class="key__top face"></div><div class="key__bottom face"></div></div><div class="key flex"><div class="key__front face"></div><div class="key__back face"></div><div class="key__right face"></div><div class="key__left face"></div><div class="key__top face"></div><div class="key__bottom face"></div></div><div class="key flex"><div class="key__front face"></div><div class="key__back face"></div><div class="key__right face"></div><div class="key__left face"></div><div class="key__top face"></div><div class="key__bottom face"></div></div><div class="key flex"><div class="key__front face"></div><div class="key__back face"></div><div class="key__right face"></div><div class="key__left face"></div><div class="key__top face"></div><div class="key__bottom face"></div></div><div class="key flex"><div class="key__front face"></div><div class="key__back face"></div><div class="key__right face"></div><div class="key__left face"></div><div class="key__top face"></div><div class="key__bottom face"></div></div><div class="key flex"><div class="key__front face"></div><div class="key__back face"></div><div class="key__right face"></div><div class="key__left face"></div><div class="key__top face"></div><div class="key__bottom face"></div></div><div class="key flex"><div class="key__front face"></div><div class="key__back face"></div><div class="key__right face"></div><div class="key__left face"></div><div class="key__top face"></div><div class="key__bottom face"></div></div><div class="key flex"><div class="key__front face"></div><div class="key__back face"></div><div class="key__right face"></div><div class="key__left face"></div><div class="key__top face"></div><div class="key__bottom face"></div></div><div class="key flex"><div class="key__front face"></div><div class="key__back face"></div><div class="key__right face"></div><div class="key__left face"></div><div class="key__top face"></div><div class="key__bottom face"></div></div><div class="key key--w3 flex"><div class="key__front key__front--w3 face face--key-b3"></div><div class="key__back key__back--w3 face face--key-b1"></div><div class="key__right key__right--w3 face face--key-b1"></div><div class="key__left key__left--w3 face face--key-b2"></div><div class="key__top key__top--w3 face face--key-b1"></div><div class="key__bottom key__bottom--w3 face face--key-b2"></div></div></div><div class="keys"><div class="key flex"><div class="key__front face face--key-b3"></div><div class="key__back face face--key-b1"></div><div class="key__right face face--key-b1"></div><div class="key__left face face--key-b2"></div><div class="key__top face face--key-b1"></div><div class="key__bottom face face--key-b2"></div></div><div class="key flex"><div class="key__front face face--key-o3"></div><div class="key__back face face--key-o1"></div><div class="key__right face face--key-o1"></div><div class="key__left face face--key-o2"></div><div class="key__top face face--key-o1"></div><div class="key__bottom face face--key-o2"></div></div><div class="key flex"><div class="key__front face face--key-b3"></div><div class="key__back face face--key-b1"></div><div class="key__right face face--key-b1"></div><div class="key__left face face--key-b2"></div><div class="key__top face face--key-b1"></div><div class="key__bottom face face--key-b2"></div></div><div class="key flex"><div class="key__front face face--key-b3"></div><div class="key__back face face--key-b1"></div><div class="key__right face face--key-b1"></div><div class="key__left face face--key-b2"></div><div class="key__top face face--key-b1"></div><div class="key__bottom face face--key-b2"></div></div><div class="key key--w6 flex"><div class="key__front key__front--w6 face"></div><div class="key__back key__back--w6 face"></div><div class="key__right key__right--w6 face"></div><div class="key__left key__left--w6 face"></div><div class="key__top key__top--w6 face"></div><div class="key__bottom key__bottom--w6 face"></div></div><div class="key flex"><div class="key__front face face--key-b3"></div><div class="key__back face face--key-b1"></div><div class="key__right face face--key-b1"></div><div class="key__left face face--key-b2"></div><div class="key__top face face--key-b1"></div><div class="key__bottom face face--key-b2"></div></div><div class="key flex"><div class="key__front face face--key-b3"></div><div class="key__back face face--key-b1"></div><div class="key__right face face--key-b1"></div><div class="key__left face face--key-b2"></div><div class="key__top face face--key-b1"></div><div class="key__bottom face face--key-b2"></div></div><div class="key flex"><div class="key__front face face--key-b3"></div><div class="key__back face face--key-b1"></div><div class="key__right face face--key-b1"></div><div class="key__left face face--key-b2"></div><div class="key__top face face--key-b1"></div><div class="key__bottom face face--key-b2"></div></div><div class="key flex"><div class="key__front face face--key-b3"></div><div class="key__back face face--key-b1"></div><div class="key__right face face--key-b1"></div><div class="key__left face face--key-b2"></div><div class="key__top face face--key-b1"></div><div class="key__bottom face face--key-b2"></div></div><div class="key flex"><div class="key__front face face--key-b3"></div><div class="key__back face face--key-b1"></div><div class="key__right face face--key-b1"></div><div class="key__left face face--key-b2"></div><div class="key__top face face--key-b1"></div><div class="key__bottom face face--key-b2"></div></div></div></div><div class="keyboard__bottom face"></div></div></div><script>const m=document.querySelector('#m');const k=document.querySelector('#k');const s=document.querySelector('#s');const kd=document.querySelectorAll('.key');let con=0;let base=(e)=>{let x=e.pageX/window.innerWidth-0.5;let y=e.pageY/window.innerHeight-0.5;k.style.transform=`perspective(10000px)rotateX(${y*10+60}deg)rotateZ(-${x*40+35}deg)`};let addKey=(e)=>{let kc=event.keyCode;if((kc>=65&&kc<=90)||kc==32){if(kc==81){kd[15].classList.add('key--down')}else if(kc==87){kd[16].classList.add('key--down')}else if(kc==69){kd[17].classList.add('key--down')}else if(kc==82){kd[18].classList.add('key--down')}else if(kc==84){kd[19].classList.add('key--down')}else if(kc==89){kd[20].classList.add('key--down')}else if(kc==85){kd[21].classList.add('key--down')}else if(kc==73){kd[22].classList.add('key--down')}else if(kc==79){kd[23].classList.add('key--down')}else if(kc==80){kd[24].classList.add('key--down')}else if(kc==65){kd[29].classList.add('key--down')}else if(kc==83){kd[30].classList.add('key--down')}else if(kc==68){kd[31].classList.add('key--down')}else if(kc==70){kd[32].classList.add('key--down')}else if(kc==71){kd[33].classList.add('key--down')}else if(kc==72){kd[34].classList.add('key--down')}else if(kc==74){kd[35].classList.add('key--down')}else if(kc==75){kd[36].classList.add('key--down')}else if(kc==76){kd[37].classList.add('key--down')}else if(kc==192){kd[38].classList.add('key--down')}else if(kc==90){kd[41].classList.add('key--down')}else if(kc==88){kd[42].classList.add('key--down')}else if(kc==67){kd[43].classList.add('key--down')}else if(kc==86){kd[44].classList.add('key--down')}else if(kc==66){kd[45].classList.add('key--down')}else if(kc==78){kd[46].classList.add('key--down')}else if(kc==77){kd[47].classList.add('key--down')}else if(kc==13){kd[39].classList.add('key--down')}else if(kc==32){kd[56].classList.add('key--down');s.innerHTML+=' '}s.innerHTML+=String.fromCharCode(kc);con++;if(con>10){s.innerHTML='';con=0}}if(kc==8){s.innerHTML='';kd[27].classList.add('key--down');con=0}};let removeKey=(e)=>{let kc=event.keyCode;if(kc==81){kd[15].classList.remove('key--down')}else if(kc==87){kd[16].classList.remove('key--down')}else if(kc==69){kd[17].classList.remove('key--down')}else if(kc==82){kd[18].classList.remove('key--down')}else if(kc==84){kd[19].classList.remove('key--down')}else if(kc==89){kd[20].classList.remove('key--down')}else if(kc==85){kd[21].classList.remove('key--down')}else if(kc==73){kd[22].classList.remove('key--down')}else if(kc==79){kd[23].classList.remove('key--down')}else if(kc==80){kd[24].classList.remove('key--down')}else if(kc==65){kd[29].classList.remove('key--down')}else if(kc==83){kd[30].classList.remove('key--down')}else if(kc==68){kd[31].classList.remove('key--down')}else if(kc==70){kd[32].classList.remove('key--down')}else if(kc==71){kd[33].classList.remove('key--down')}else if(kc==72){kd[34].classList.remove('key--down')}else if(kc==74){kd[35].classList.remove('key--down')}else if(kc==75){kd[36].classList.remove('key--down')}else if(kc==76){kd[37].classList.remove('key--down')}else if(kc==192){kd[38].classList.remove('key--down')}else if(kc==90){kd[41].classList.remove('key--down')}else if(kc==88){kd[42].classList.remove('key--down')}else if(kc==67){kd[43].classList.remove('key--down')}else if(kc==86){kd[44].classList.remove('key--down')}else if(kc==66){kd[45].classList.remove('key--down')}else if(kc==78){kd[46].classList.remove('key--down')}else if(kc==77){kd[47].classList.remove('key--down')}else if(kc==32){kd[56].classList.remove('key--down')}else if(kc==13){kd[39].classList.remove('key--down')}else if(kc==8){kd[27].classList.remove('key--down')}};m.addEventListener('mousemove',base);window.addEventListener('keydown',addKey);window.addEventListener('keyup',removeKey);</script>
</body>
</html>
