404 错误页面
效果
出错啦!
页面不存在！
4
4
返回首页
纯css+html 源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>
出错啦！
</title>
<style type="text/css" media="screen">
:root{--c0:#71a1ff;--c1:#4d85f6;--c2:#3b72e2;--c3:#336de2;--c4:#2151af;--c5:#244483;--c6:#103071;--clr:1;--hue:calc(30deg -(30deg * var(--clr)))}body{margin:0;padding:0;width:100vw;height:100vh;overflow:hidden;display:flex;align-items:center;justify-content:center;perspective:1000vmin;font-family:'Varela Round',Arial,Helvetica,serif;background:var(--c0)}body *{transform-style:preserve-3d}.cuboid{--size:250;--height:var(--size);--width:var(--size);--depth:var(--size);height:calc(var(--size) * 1vmin);width:calc(var(--size) * 1vmin);position:absolute;transform:rotateX(50deg) rotate(45deg);pointer-events:none}.cuboid .side{position:absolute;top:50%;left:50%;height:100%;width:100%;border-radius:2px;box-shadow:0vmin 0vmin .5vmin 0 var(--c0) inset,0 0 5vmin 0 var(--c0)}.cuboid .side:nth-of-type(1){transform:translate3d(-50%,-50%,calc(var(--size) * -0.5vmin)) rotateY(180deg);background:radial-gradient(circle at 100% 0,var(--c4),#fff0 45vmin),radial-gradient(circle at 100% 0,var(--c1),var(--c4))}.cuboid .side:nth-of-type(2){width:calc(var(--size) * 1vmin);transform:translate(-50%,-50%) rotateY(-90deg) translate3d(0,0,calc(var(--size) * .5vmin));background:radial-gradient(circle at 0 0,var(--c4),#fff0 45vmin),radial-gradient(circle at 0 0,var(--c2),var(--c5))}.cuboid .side:nth-of-type(3){height:calc(var(--size) * 1vmin);transform:translate(-50%,-50%) rotateX(90deg) translate3d(0,0,calc(var(--size) * .5vmin));background:radial-gradient(circle at 0 0,var(--c4),#fff0 45vmin),radial-gradient(circle at 0 0,var(--c1),var(--c6))}.room{width:100vw;height:100vh;display:flex;align-items:center;justify-content:center;overflow:hidden;filter:hue-rotate(var(--hue))}.oops{width:100%;text-align:center;font-size:2.25vmin;transform:rotateX(21deg);transform-origin:100% 50%;top:10%;position:absolute;left:0}.oops h2{color:#fff2;float:left;transform-origin:100% 50%;transform:rotateY(-60deg) scaleX(1.5);margin:-5vmin 0 0 -5vmin;font-size:14vmin;width:50%;text-shadow:0 2px 1px #94B5FF,-1px 1px 2px #94b5ff80,-1px -1px 2px var(--c4),-2px -2px 2px var(--c4),-3px -3px 2px var(--c4),-4px -4px 2px var(--c4),-5px -5px 2px var(--c4),-6px -6px 2px var(--c4),-7px -7px 2px var(--c4),-8px -8px 2px var(--c4),-9px -9px 2px var(--c4),-10px -10px 2px var(--c4),-11px -11px 2px var(--c4),-12px -12px 2px var(--c4),-13px -13px 2px var(--c4),-14px -14px 2px var(--c4),-15px -15px 2px var(--c4),-16px -16px 2px var(--c4),-16px -16px 2px var(--c6),-10px -10px 8px var(--c6),-6px -15px 13px var(--c6)}.oops p{float:right;color:#fff4;transform-origin:0 50%;transform:rotateY(60deg) scaleX(1.5);margin-top:-4vmin;margin-right:-2vmin;font-size:5vmin;max-width:50vmin;width:50%;text-shadow:0 2px 1px #94B5FF,-1px 1px 2px #94b5ff80,1px -1px 2px var(--c4),2px -2px 2px var(--c4),3px -3px 2px var(--c4),4px -4px 2px var(--c4),5px -5px 2px var(--c4),6px -6px 2px var(--c4),7px -7px 2px var(--c4),8px -8px 2px var(--c4),6px -6px 7px var(--c6),6px -6px 7px var(--c6)}.center-line{width:100%;display:flex;align-items:center;justify-content:center;flex-direction:column}.hole{width:28vmin;height:20vmin;background:radial-gradient(circle at 50% 0,var(--c2),#fff0 45%),radial-gradient(circle at 30% 100%,#061b43,#fff0 77%),radial-gradient(circle at 20% 100%,var(--c3),var(--c2),var(--c2));border-radius:100%;box-shadow:0 -2px 4px -2px #fffc,0 2px 3px -3px #fffc inset,0 2px 6px -4px #000;overflow:hidden;position:relative;margin-top:30vmin}.ladder,.ladder-shadow{--shadow:#0008;background:linear-gradient(180deg,#fff0 33%,var(--shadow),#000),linear-gradient(90deg,#cec3b9 0 1.2vmin,#b3aba2 0 1.5vmin,#fff0 0 100%),linear-gradient(90deg,#cec3b9 0 1.2vmin,#b3aba2 0 1.75vmin,#fff0 0 calc(100% - 1.75vmin)),repeating-linear-gradient(0deg,#cec3b9 0 1.2vmin,#e7dbcf 0 1.75vmin,#fff0 0 6.75vmin),linear-gradient(90deg,#cec3b9 0 1.2vmin,#b3aba2 0 1.75vmin,#fff0 0 calc(100% - 1.75vmin));width:10vmin;height:30vmin;margin-left:14vmin;position:absolute;top:0vmin;transform:rotate3d(4,1,1,45deg) skew(0deg,20deg);background-position:0 0,0 0,8.25vmin 0,0 -3.25vmin,0 0;background-size:100% 100%;background-repeat:no-repeat}.ladder-shadow{filter:invert(1) blur(1px) opacity(0.4) contrast(5);transform:rotate3d(2,1,1,45deg) rotate(-10deg) translate(1.15vmin,1.9vmin) skew(0deg,20deg);--shadow:#0000}.ladder:before,.ladder:after{content:"";position:absolute;background:linear-gradient(210deg,#fff0 .4vmin,#e7dbcf calc(0.35vmin+1px) 1.45vmin,#b3aba2 calc(1.4vmin+1px) 100%);width:.85vmin;height:1.75vmin;transform-origin:0 1%;transform:rotate(-90deg);top:1px}.ladder:after{left:8.25vmin}.four{font-size:45vmin;font-weight:bold;font-family:Arial,Helvetica,serif;position:absolute;margin-left:-58vmin;margin-top:27vmin;transform:rotate(22deg) scale(0.8,0.85) rotateX(40deg) rotateY(-10deg) rotateZ(-5deg);text-shadow:0 2px 1px #94b5ff,-1px 1px 2px #94b5ff80,1px 2px 2px var(--c3),2px 4px 2px var(--c3),4px 6px 2px var(--c3),5px 8px 2px var(--c3),6px 10px 2px var(--c3),7px 12px 2px var(--c3),8px 14px 2px var(--c3),9px 16px 2px var(--c3),10px 18px 2px var(--c3),11px 20px 3px var(--c3),12px 22px 3px var(--c3),13px 22px 10px var(--c6),18px 14px 15px var(--c6);color:var(--c1);filter:drop-shadow(10px -4px 10px var(--c4))}.four+.four{margin-left:43vmin;margin-top:15vmin;transform:scale(0.95,0.75) rotateX(5deg) rotateY(35deg) rotateZ(30deg) translateZ(18vmin);text-shadow:1px 0 2px #94b5ff,3px 0 2px #94b5ff80,1px 0 0 var(--c3),2px 0 2px var(--c3),4px 0 2px var(--c3),5px 0 2px var(--c3),6px 0 2px var(--c3),7px 0 2px var(--c3),8px 0 2px var(--c3),9px 0 2px var(--c3),10px 0 2px var(--c3),11px 0 3px var(--c3),12px 0 3px var(--c3),20px 0 3px var(--c3),13px 0 5px var(--c6),18px -6px 15px var(--c6)}.four+.four:before,.four+.four:after{content:"4";color:var(--c6);position:absolute;transform-origin:60% 0;transform:rotateX(27deg) rotate(-20deg) translate(-0.5vmin,0.5vmin) skew(0deg,20deg);transform-style:preserve-3d;text-shadow:none;z-index:-1;clip-path:polygon(0 0,100% 0,100% 50%,0 46%,0 0);filter:blur(5px);opacity:.4}.four+.four:after{transform-origin:50% 100%;transform:rotatex(12deg) rotate(-13deg) translate(-27.5vmin,-5.5vmin) skew(-32deg,6deg) scaleX(1.1);clip-path:polygon(0 39.75%,100% 49.25%,100% 100%,0 100%,0 50%)}.btn{position:absolute;bottom:-15vmin;transform-origin:50% 0;transform:rotateX(15deg)}.btn a{border-radius:.2vmin;padding:1.5vmin 2.5vmin;background:#528cff;text-decoration:none;color:#fff9;top:0;font-size:3vmin;text-shadow:0 -2px 2px var(--c0),0px 1px 3px var(--c6);position:relative;transition:all .25s linear 0s;box-shadow:1px 0 1px #94b5ff,0px 2px 2px #94b5ff80,0px 1px 2px var(--c3),0px 4px 2px var(--c3),0px 6px 2px var(--c3),0px 8px 2px var(--c3),0px 10px 2px var(--c3),0px 12px 2px var(--c3),0px 14px 2px var(--c3),0px 16px 2px var(--c3),0px 18px 2px var(--c3),0px 20px 3px var(--c3),2px 22px 3px var(--c3),0px 23px 3px var(--c6),0px 3px 15px var(--c6)}.btn a:hover{top:16px;color:var(--c6);box-shadow:1px 0 1px #94b5ff,0px 2px 2px #94b5ff80,0px 1px 2px var(--c3),0px 1px 2px var(--c3),0px 2px 2px var(--c3),0px 2px 2px var(--c3),0px 2px 2px var(--c3),0px 2px 2px var(--c3),0px 2px 3px var(--c3),0px 2px 3px var(--c3),0px 2px 2px var(--c3),0px 2px 3px var(--c3),2px 2px 3px var(--c3),0px 4px 3px var(--c6),2px 5px 6px var(--c6)}.btn::after{content:"";position:absolute;background:var(--c4);width:100%;height:300%;left:0;top:0;transform:translateZ(-2vmin) skew(-10deg,0deg) translateY(-4.5vmin) translateX(1vmin);filter:blur(5px);transition:all .5s ease 0s;opacity:.35}.btn:hover::after{background:#0000;width:100%;height:20%;left:0;top:0;transform:translateZ(-2vmin) skew(-0deg,0deg) translateY(0vmin) translateX(0vmin)}@media screen and (orientation:portrait){.oops p{line-height:10vmin;font-size:6.5vmin}}
</style>
</head>
<body>
<div class="room">
<div class="cuboid">
<div class="side">
</div>
<div class="side">
</div>
<div class="side">
</div>
</div>
<div class="oops">
<h2>
出错啦!
</h2>
<p>
页面不存在！
</p>
</div>
<div class="center-line">
<div class="hole">
<div class="ladder-shadow">
</div>
<div class="ladder">
</div>
</div>
<div class="four">
4
</div>
<div class="four">
4
</div>
<div class="btn">
<a href="/">
返回首页
</a>
</div>
</div>
</div>
</body>
</html>