状态码页面单页源码
可做为各种错误页！具体点下面的运行看演示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>服务器错误 - 504</title>
<!-- 引入Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
tv: {
dark: '#050505',
glow: '#e0e0e0',
static: '#f0f0f0'
}
},
fontFamily: {
tv: ['"VT323"', 'monospace']
}
}
}
}
</script>
<style type="text/tailwindcss">
@layer utilities {
.text-shadow-glow {
text-shadow: 0 0 8px rgba(255, 255, 255, 0.8),
0 0 12px rgba(255, 255, 255, 0.5);
}
.tv-scanline {
background: linear-gradient(to bottom,
transparent 50%,
rgba(255, 255, 255, 0.03) 51%,
transparent 51%);
background-size: 100% 4px;
}
.signal-distort {
clip-path: polygon(0 0, 100% 0, 100% 98%, 0 100%);
}
}
</style>
<style>
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
body {
overflow: hidden;
background-color: #000;
}
#snowCanvas {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0.8;
}
.tv-frame {
position: relative;
z-index: 2;
border: 12px solid #222;
border-radius: 4px;
box-shadow: 0 0 30px rgba(0, 0, 0, 0.8) inset,
0 0 20px rgba(0, 0, 0, 0.6);
}
.error-code {
animation: signalFlicker 8s infinite alternate,
positionJitter 0.3s infinite;
}
.error-message {
animation: messageFade 15s infinite alternate,
subtleJitter 2s infinite;
}
@keyframes signalFlicker {
0%, 10%, 20%, 80%, 90%, 100% { opacity: 1; }
5%, 15%, 85%, 95% { opacity: 0.8; }
25%, 75% { opacity: 0.95; }
50% { opacity: 0.7; }
}
@keyframes positionJitter {
0%, 100% { transform: translate(0, 0); }
25% { transform: translate(-1px, 1px); }
50% { transform: translate(1px, -1px); }
75% { transform: translate(-1px, -1px); }
}
@keyframes subtleJitter {
0%, 100% { transform: translate(0, 0); }
50% { transform: translate(0, 1px); }
}
@keyframes messageFade {
0%, 10%, 90%, 100% { opacity: 0.7; }
50% { opacity: 0.5; }
}
@keyframes powerOn {
0% {
transform: scale(1.2);
opacity: 0;
filter: brightness(3);
}
30% {
opacity: 1;
filter: brightness(2);
}
100% {
transform: scale(1);
filter: brightness(1);
}
}
.power-on {
animation: powerOn 1.2s ease-out forwards;
}
</style>
</head>
<body class="bg-tv-dark min-h-screen flex items-center justify-center p-4">
<canvas id="snowCanvas"></canvas>
<div class="tv-frame w-full max-w-2xl aspect-video flex flex-col items-center justify-center signal-distort power-on">
<div class="tv-scanline absolute inset-0 pointer-events-none"></div>
<div class="text-center px-6">
<div class="error-code text-tv-static text-[clamp(5rem,15vw,10rem)] font-bold font-tv text-shadow-glow mb-4">
504
</div>
<div class="error-message text-tv-glow text-[clamp(1rem,3vw,1.5rem)] font-tv leading-relaxed">
<p>服务器内部错误</p>
<p>信号接收不良，请检查连接</p>
<p class="mt-4 text-sm opacity-60">ERROR: INTERNAL SYSTEM FAILURE</p>
</div>
</div>
</div>
<script>
const canvas = document.getElementById('snowCanvas');
const ctx = canvas.getContext('2d');
function resizeCanvas() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
resizeCanvas();
window.addEventListener('resize', resizeCanvas);
function drawSnow() {
ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
const snowDensity = Math.floor(canvas.width * canvas.height * 0.0015);
ctx.fillStyle = 'rgba(255, 255, 255, ' + (0.3 + Math.random() * 0.7) + ')';
for (let i = 0; i < snowDensity; i++) {
const x = Math.random() * canvas.width;
const y = Math.random() * canvas.height;
const size = Math.random() * 1.2;
ctx.fillRect(x, y, size, size);
}
if (Math.random() > 0.7) {
const lineY = Math.random() * canvas.height;
const lineOpacity = 0.1 + Math.random() * 0.2;
ctx.fillStyle = 'rgba(255, 255, 255, ' + lineOpacity + ')';
ctx.fillRect(0, lineY, canvas.width, 1);
}
requestAnimationFrame(drawSnow);
}
function signalInterference() {
const chance = Math.random();
const snowLayer = document.getElementById('snowCanvas');
if (chance < 0.01) {
snowLayer.style.opacity = 1;
setTimeout(() => {
snowLayer.style.opacity = 0.8 + Math.random() * 0.2;
}, 50 + Math.random() * 150);
} else if (chance < 0.05) {
snowLayer.style.opacity = 0.9 + Math.random() * 0.1;
setTimeout(() => {
snowLayer.style.opacity = 0.8;
}, 300);
}
setTimeout(signalInterference, 500 + Math.random() * 2000);
}
drawSnow();
signalInterference();
</script>
</body>
</html>