©2020-2024 ioDraw All rights reserved
先看效果：
再看代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>500页面</
title> <style> body, html { padding: 0; margin: 0; font-family: 'Quicksand',
sans-serif; font-weight: 400; overflow: hidden; } .writing { width: 320px;
height: 200px; background-color: #3f3f3f; border: 1px solid #bbbbbb;
border-radius: 6px 6px 4px 4px; position: relative; } .writing .topbar{ position
: absolute; width: 100%; height: 12px; background-color: #f1f1f1;
border-top-left-radius: 4px; border-top-right-radius: 4px; } .writing .topbar
div{ height: 6px; width: 6px; border-radius: 50%; margin: 3px; float: left; }
.writing .topbar div.green{ background-color: #60d060; } .writing .topbar
div.red{ background-color: red; } .writing .topbar div.yellow{ background-color:
#e6c015; } .writing .code { padding: 15px; } .writing .code ul { list-style:
none; margin: 0; padding: 0; } .writing .code ul li { background-color: #9e9e9e;
width: 0; height: 7px; border-radius: 6px; margin: 10px 0; } .container {
display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align:
center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center;
-ms-flex-pack: center; justify-content: center; height: 100vh; width: 100%;
-webkit-transition: -webkit-transform .5s; transition: -webkit-transform .5s;
transition: transform .5s; transition: transform .5s, -webkit-transform .5s; }
.stack-container { position: relative; width: 420px; height: 210px;
-webkit-transition: width 1s, height 1s; transition: width 1s, height 1s; }
.pokeup { -webkit-transition: all .3s ease; transition: all .3s ease; }
.pokeup:hover { -webkit-transform: translateY(-10px); transform: translateY(
-10px); -webkit-transition: .3s ease; transition: .3s ease; } .error { width:
400px; padding: 40px; text-align: center; } .error h1 { font-size: 125px;
padding: 0; margin: 0; font-weight: 700; } .error h2 { margin: -30px 0 0 0;
padding: 0px; font-size: 47px; letter-spacing: 12px; } .perspec {
-webkit-perspective: 1000px; perspective: 1000px; } .writeLine{
-webkit-animation: writeLine .4s linear forwards; animation: writeLine .4s
linear forwards; } .explode{ -webkit-animation: explode .5s ease-in-out forwards
; animation: explode .5s ease-in-out forwards; } .card { -webkit-animation:
tiltcard .5s ease-in-out 1s forwards; animation: tiltcard .5s ease-in-out 1s
forwards; position: absolute; } @-webkit-keyframes tiltcard { 0% {
-webkit-transform: rotateY(0deg); transform: rotateY(0deg); } 100% {
-webkit-transform: rotateY(-30deg); transform: rotateY(-30deg); } } @keyframes
tiltcard { 0% { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); }
100% { -webkit-transform: rotateY(-30deg); transform: rotateY(-30deg); } }
@-webkit-keyframes explode { 0% { -webkit-transform: translate(0, 0) scale(1);
transform: translate(0, 0) scale(1); } 100% { -webkit-transform: translate(var(
--spreaddist), var(--vertdist)) scale(var(--scaledist)); transform: translate(
var(--spreaddist), var(--vertdist)) scale(var(--scaledist)); } } @keyframes
explode { 0% { -webkit-transform: translate(0, 0) scale(1); transform: translate
(0, 0) scale(1); } 100% { -webkit-transform: translate(var(--spreaddist), var(
--vertdist)) scale(var(--scaledist)); transform: translate(var(--spreaddist),
var(--vertdist)) scale(var(--scaledist)); } } @-webkit-keyframes writeLine { 0%
{ width:0; } 100% { width: var(--linelength); } } @keyframes writeLine { 0% {
width:0; } 100% { width: var(--linelength); } } @media screen and (max-width:
1000px) { .container { -webkit-transform: scale(.85); transform: scale(.85); } }
@media screen and (max-width: 850px) { .container { -webkit-transform: scale(.75
); transform: scale(.75); } } @media screen and (max-width: 775px) { .container
{ -ms-flex-wrap: wrap-reverse; flex-wrap: wrap-reverse; -webkit-box-align:
inherit; -ms-flex-align: inherit; align-items: inherit; } } @media screen and (
max-width: 370px) { .container { -webkit-transform: scale(.6); transform: scale(
.6); } } </style> </head> <body> <div class="container"> <div class="error"> <h1
>500</h1> <h2>error</h2> <p>Ruh-roh, something just isn't right... Time to paw
through your logs and get down and dirty in your stack-trace;)</p> </div> <div
class="stack-container"> <div class="card-container"> <div class="perspec" style
="--spreaddist: 125px; --scaledist: .75; --vertdist: -25px;"> <div class="card">
<div class="writing"> <div class="topbar"> <div class="red"></div> <div class="
yellow"></div> <div class="green"></div> </div> <div class="code"> <ul> </ul> </
div> </div> </div> </div> </div> <div class="card-container"> <div class="
perspec" style="--spreaddist: 100px; --scaledist: .8; --vertdist: -20px;"> <div
class="card"> <div class="writing"> <div class="topbar"> <div class="red"></div>
<div class="yellow"></div> <div class="green"></div> </div> <div class="code"> <
ul> </ul> </div> </div> </div> </div> </div> <div class="card-container"> <div
class="perspec" style="--spreaddist:75px; --scaledist: .85; --vertdist: -15px;">
<div class="card"> <div class="writing"> <div class="topbar"> <div class="red">
</div> <div class="yellow"></div> <div class="green"></div> </div> <div class="
code"> <ul> </ul> </div> </div> </div> </div> </div> <div class="card-container"
> <div class="perspec" style="--spreaddist: 50px; --scaledist: .9; --vertdist:
-10px;"> <div class="card"> <div class="writing"> <div class="topbar"> <div
class="red"></div> <div class="yellow"></div> <div class="green"></div> </div> <
div class="code"> <ul> </ul> </div> </div> </div> </div> </div> <div class="
card-container"> <div class="perspec" style="--spreaddist: 25px; --scaledist:
.95; --vertdist: -5px;"> <div class="card"> <div class="writing"> <div class="
topbar"> <div class="red"></div> <div class="yellow"></div> <div class="green">
</div> </div> <div class="code"> <ul> </ul> </div> </div> </div> </div> </div> <
div class="card-container"> <div class="perspec" style="--spreaddist: 0px;
--scaledist: 1; --vertdist: 0px;"> <div class="card"> <div class="writing"> <div
class="topbar"> <div class="red"></div> <div class="yellow"></div> <div class="
green"></div> </div> <div class="code"> <ul> </ul> </div> </div> </div> </div>
</div> </div> </div> </body> <script> const stackContainer = document.
querySelector('.stack-container'); const cardNodes = document.querySelectorAll(
'.card-container'); const perspecNodes = document.querySelectorAll('.perspec');
const perspec = document.querySelector('.perspec'); const card = document.
querySelector('.card'); let counter = stackContainer.children.length; //生成随机数的函数
function randomIntFromInterval(min, max) { return Math.floor(Math.random() * (
max- min + 1) + min); } card.addEventListener('animationend', function () {
perspecNodes.forEach(function (elem, index) { elem.classList.add('explode'); });
}); perspec.addEventListener('animationend', function (e) { if (e.animationName
=== 'explode') { cardNodes.forEach(function (elem, index) { //添加悬停动画类 elem.
classList.add('pokeup'); //添加事件列表以在单击时投掷卡片 elem.addEventListener('click',
function () { let updown = [800, -800] let randomY = updown[Math.floor(Math.
random() * updown.length)]; let randomX = Math.floor(Math.random() * 1000) -
1000; elem.style.transform = `translate(${randomX}px, ${randomY}px)
rotate(-540deg)` elem.style.transition = "transform 1s ease, opacity 2s"; elem.
style.opacity = "0"; counter--; if (counter === 0) { stackContainer.style.width
= "0"; stackContainer.style.height = "0"; } }); //生成4到10之间的随机代码行，并添加到每张卡上 let
numLines= randomIntFromInterval(5, 10); //循环遍历并将它们添加到DOM中 for (let index = 0;
index< numLines; index++) { let lineLength = randomIntFromInterval(25, 97); var
node= document.createElement("li"); node.classList.add('node-' + index); elem.
querySelector('.code ul').appendChild(node).setAttribute('style',
'--linelength: ' + lineLength + '%;'); if (index == 0) { elem.querySelector(
'.code ul .node-' + index).classList.add('writeLine'); } else { elem.
querySelector('.code ul .node-' + (index - 1)).addEventListener('animationend',
function (e) { elem.querySelector('.code ul .node-' + index).classList.add(
'writeLine'); }); } } }); } }); </script> </html>