代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>404 | 迷失在宇宙</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="icon" href="https://img.sakurain.net/upload/202510/68dc188c912593.68760440.webp">
<style>
:root{
--accent:#ff3cac;
--glass:rgba(255,255,255,0.12);
--blur:16px;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden}
body{
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial;
color:#fff;
background:#000;
}
/* 星空 */
#stars{
position:fixed;
left:0;top:0;width:100%;height:100%;
z-index:1;
}
/* 玻璃卡片 */
.card{
position:relative;
z-index:10;
width:90%;max-width:420px;
padding:50px 40px 60px;
background:var(--glass);
border-radius:24px;
border:1px solid rgba(255,255,255,0.2);
backdrop-filter:blur(var(--blur));
-webkit-backdrop-filter:blur(var(--blur));
text-align:center;
transform-style:preserve-3d;
transition:transform .2s ease-out;
}
.card img{
width:140px;height:140px;
margin-bottom:24px;
filter:drop-shadow(0 0 12px var(--accent));
animation:float 5s ease-in-out infinite;
}
.card h1{
font-size:48px;
letter-spacing:4px;
margin-bottom:12px;
background:linear-gradient(90deg,#ff3cac,#ff8a00);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}
.card p{
font-size:18px;
color:rgba(255,255,255,0.7);
margin-bottom:32px;
min-height:54px;
}
.card a{
display:inline-block;
padding:12px 36px;
border-radius:30px;
background:linear-gradient(45deg,var(--accent),#ff8a00);
color:#fff;
text-decoration:none;
font-weight:600;
box-shadow:0 0 18px var(--accent),inset 0 0 8px rgba(255,255,255,0.4);
animation:pulse 2s infinite;
transition:transform .3s;
}
.card a:hover{transform:scale(1.06)}
/* 打字机 */
.type::after{
content:"|";
animation:blink 1s infinite;
}
/* 粒子波浪画布 */
#waveCanvas{
position:absolute;
bottom:0;left:0;width:100%;height:160px;
z-index:5;
}
/* 动画 */
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes pulse{0%,100%{box-shadow:0 0 18px var(--accent),inset 0 0 8px rgba(255,255,255,0.4)}50%{box-shadow:0 0 30px var(--accent),inset 0 0 12px rgba(255,255,255,0.6)}}
@keyframes blink{0%,50%{opacity:1}51%,100%{opacity:0}}
/* 居中 */
.center{
height:100%;
display:flex;
justify-content:center;
align-items:center;
}
/* 流星 */
.meteor{
position:fixed;
width:2px;height:100px;
background:linear-gradient(to bottom,rgba(255,255,255,0) 0%,#fff 100%);
opacity:0;
animation:meteor 8s linear infinite;
}
@keyframes meteor{
0%{transform:translateY(-120px) translateX(0);opacity:1}
100%{transform:translateY(calc(100vh + 120px)) translateX(-400px);opacity:0}
}
</style>
</head>
<body>
<canvas id="stars"></canvas>
<canvas id="waveCanvas"></canvas>
<!-- 流星 -->
<div class="meteor" style="top:10%;left:80%;animation-delay:0s"></div>
<div class="meteor" style="top:25%;left:20%;animation-delay:2s"></div>
<div class="meteor" style="top:50%;left:60%;animation-delay:4s"></div>
<div class="center">
<div class="card" id="card">
<img id="icon" src="https://img.sakurain.net/upload/202510/68dc188c912593.68760440.webp" alt="404">
<h1>404</h1>
<p class="type" id="type"></p>
<a href="javascript:history.back()">返 回</a>
</div>
</div>
<script>
/* ---------- 星空 ---------- */
const cvs=document.getElementById('stars'),ctx=cvs.getContext('2d');
let w=cvs.width=innerWidth,h=cvs.height=innerHeight;
const stars=[],count=400;
for(let i=0;i<count;i++){
stars.push({
x:Math.random()*w,
y:Math.random()*h,
r:Math.random()*1.2,
a:Math.random(),
speed:0.02+Math.random()*0.05
});
}
function drawStars(){
ctx.clearRect(0,0,w,h);
ctx.fillStyle='#fff';
stars.forEach(s=>{
s.a+=s.speed;
s.y+=Math.sin(s.a)*0.3;
if(s.y>h+10)s.y=-10;
ctx.beginPath();
ctx.arc(s.x,s.y,s.r,0,Math.PI*2);
ctx.closePath();
ctx.fillStyle=`rgba(255,255,255,${Math.random()*0.8+0.2})`;
ctx.fill();
});
requestAnimationFrame(drawStars);
}
drawStars();
addEventListener('resize',()=>{
w=cvs.width=innerWidth;
h=cvs.height=innerHeight;
});
/* ---------- 打字机 ---------- */
const txt="别慌，你只是迷失在宇宙边缘~";
let i=0;
const typeEl=document.getElementById('type');
function type(){
if(i<txt.length){
typeEl.textContent+=txt[i++];
setTimeout(type,80);
}
}
type();
/* ---------- 视差 ---------- */
const card=document.getElementById('card');
addEventListener('mousemove',e=>{
const x=(e.clientX-innerWidth/2)/innerWidth*20;
const y=(e.clientY-innerHeight/2)/innerHeight*20;
card.style.transform=`rotateY(${x}deg) rotateX(${-y}deg)`;
});
/* ---------- 底部粒子波浪 ---------- */
const wv=document.getElementById('waveCanvas'),wc=wv.getContext('2d');
wv.width=innerWidth;wv.height=160;
const particles=[],amount=60;
for(let i=0;i<amount;i++){
particles.push({
x:Math.random()*wv.width,
y:wv.height/2+Math.random()*40-20,
r:Math.random()*3+1,
speed:Math.random()*1+0.5,
angle:Math.random()*Math.PI*2
});
}
function drawWave(){
wc.clearRect(0,0,wv.width,wv.height);
wc.fillStyle='rgba(255,60,172,0.35)';
particles.forEach(p=>{
p.angle+=0.02;
p.y=wv.height/2+Math.sin(p.angle)*30+Math.sin(Date.now()*0.001+p.x*0.01)*10;
wc.beginPath();
wc.arc(p.x,p.y,p.r,0,Math.PI*2);
wc.fill();
});
requestAnimationFrame(drawWave);
}
drawWave();
</script>
</body>
</html>
演示
404 | 迷失在宇宙
Comments NOTHING