前言
在数字世界的旅途中，偶尔的迷路是不可避免的。无论是沉浸在深邃的黑夜，还是沐浴在明亮的白昼，404界面都能完美适应您的偏好。一键切换，黑白之间，风格随心。
夜间效果
日间效果
相关代码
<!DOCTYPE html>
<html lang="zh" data-theme="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>404 - 页面未找到</title>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">
<style>
:root[data-theme="dark"] {
--bg-color: #1a1a1a;
--text-color: #fff;
--gradient-primary: linear-gradient(45deg, #ff00ff, #00ffff);
--shadow-color: rgba(255,0,255,0.4);
}
:root[data-theme="light"] {
--bg-color: #f0f0f0;
--text-color: #1a1a1a;
--gradient-primary: linear-gradient(45deg, #6e8efb, #a777e3);
--shadow-color: rgba(0,0,0,0.2);
}
:root[data-theme] {
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.theme-toggle {
position: fixed;
top: 20px;
right: 20px;
z-index: 100;
background: var(--gradient-primary);
border: none;
width: 50px;
height: 50px;
border-radius: 50%;
cursor: none;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
box-shadow: 0 2px 10px var(--shadow-color);
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
transform-origin: center center;
}
.theme-toggle #theme-icon {
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
transform-origin: center center;
line-height: 1;
}
.theme-toggle:hover #theme-icon {
transform: rotate(360deg);
}
body {
font-family: 'Poppins', 'Microsoft YaHei', sans-serif;
min-height: 100vh;
background: var(--bg-color);
transition: background 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
}
.stars {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
opacity: 0;
transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
:root[data-theme="dark"] .stars {
opacity: 1;
}
:root[data-theme="light"] .stars {
opacity: 0;
}
.star {
position: absolute;
width: 2px;
height: 2px;
background: var(--text-color);
border-radius: 50%;
animation: float var(--duration) linear infinite;
}
@keyframes float {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(var(--move-x), var(--move-y));
}
}
.container {
text-align: center;
padding: 2rem;
position: relative;
z-index: 1;
}
.glitch-wrapper {
position: relative;
width: 100%;
height: 200px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 2rem;
}
.glitch {
position: relative;
font-size: 180px;
font-weight: bold;
color: var(--text-color);
text-shadow:
1px 1px 1px #919191,
1px 2px 1px #919191,
1px 3px 1px #919191,
1px 4px 1px #919191,
1px 5px 1px #919191,
1px 6px 1px #919191,
1px 7px 1px #919191,
1px 8px 1px #919191,
5px 13px 15px rgba(0,0,0,0.4);
transition: color 0.5s cubic-bezier(0.4, 0, 0.2, 1),
background 0.5s cubic-bezier(0.4, 0, 0.2, 1),
text-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.glitch::before,
.glitch::after {
content: "404";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.glitch::before {
color: #ff00ff;
animation: glitch 0.3s cubic-bezier(.25, .46, .45, .94) both infinite;
}
.glitch::after {
color: #00ffff;
animation: glitch 0.3s cubic-bezier(.25, .46, .45, .94) reverse both infinite;
}
@keyframes glitch {
0% {
transform: translate(0);
}
20% {
transform: translate(-2px, 2px);
}
40% {
transform: translate(-2px, -2px);
}
60% {
transform: translate(2px, 2px);
}
80% {
transform: translate(2px, -2px);
}
100% {
transform: translate(0);
}
}
.message {
font-size: 24px;
color: var(--text-color);
margin: 20px 0;
text-shadow: 0 0 10px rgba(255,255,255,0.3);
opacity: 0;
animation: fadeIn 0.5s ease forwards 0.5s;
transition: color 0.5s cubic-bezier(0.4, 0, 0.2, 1),
background 0.5s cubic-bezier(0.4, 0, 0.2, 1),
text-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.home-button {
display: inline-block;
padding: 15px 40px;
margin-top: 30px;
background: linear-gradient(45deg, #ff00ff, #00ffff);
color: white;
text-decoration: none;
border-radius: 30px;
font-size: 18px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 2px;
transition: all 0.3s ease;
opacity: 0;
animation: fadeIn 0.5s ease forwards 1s;
position: relative;
overflow: hidden;
transition: color 0.5s cubic-bezier(0.4, 0, 0.2, 1),
background 0.5s cubic-bezier(0.4, 0, 0.2, 1),
text-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.home-button::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
120deg,
transparent,
rgba(255, 255, 255, 0.3),
transparent
);
transition: 0.5s;
}
.home-button:hover::before {
left: 100%;
}
.home-button:hover {
transform: translateY(-3px);
box-shadow: 0 5px 20px rgba(255,0,255,0.4);
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 768px) {
.glitch {
font-size: 120px;
}
.message {
font-size: 18px;
}
.home-button {
padding: 12px 30px;
font-size: 16px;
}
}
.cursor {
width: 15px;
height: 15px;
background: var(--text-color);
border-radius: 50%;
position: fixed;
pointer-events: none;
z-index: 9999;
transform: translate(-50%, -50%);
transition: transform 0.2s ease;
}
.cursor-border {
width: 40px;
height: 40px;
border: 2px solid rgba(255, 255, 255, 0.5);
position: fixed;
pointer-events: none;
z-index: 9998;
transform: translate(-50%, -50%);
transition: transform 0.2s ease;
box-shadow:
0 0 15px rgba(255, 255, 255, 0.3),
inset 0 0 15px rgba(255, 255, 255, 0.2);
}
a:hover ~ .cursor,
button:hover ~ .cursor {
transform: scale(1.5);
box-shadow: 0 0 15px var(--text-color);
}
a:hover ~ .cursor-border,
button:hover ~ .cursor-border {
transform: scale(1.2);
border-color: rgba(255, 255, 255, 0.8);
box-shadow:
0 0 20px rgba(255, 255, 255, 0.4),
inset 0 0 20px rgba(255, 255, 255, 0.3);
}
* {
cursor: none !important;
}
.theme-transition {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 9997;
opacity: 0;
transition: opacity 0.3s ease;
background: var(--bg-color);
}
.theme-transition.active {
opacity: 1;
}
:root[data-theme="dark"] .cursor {
background: #ffffff;
box-shadow: 0 0 20px rgba(255, 255, 255, 0.9);
}
:root[data-theme="dark"] .cursor-border {
border: 2px solid rgba(255, 255, 255, 0.9);
box-shadow:
0 0 30px rgba(255, 255, 255, 0.7),
inset 0 0 30px rgba(255, 255, 255, 0.6);
}
:root[data-theme="light"] .cursor {
background: #000000;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.6);
}
:root[data-theme="light"] .cursor-border {
border: 2px solid rgba(0, 0, 0, 0.7);
box-shadow:
0 0 30px rgba(0, 0, 0, 0.4),
inset 0 0 30px rgba(0, 0, 0, 0.3);
}
:root[data-theme="dark"] a:hover ~ .cursor,
:root[data-theme="dark"] button:hover ~ .cursor {
transform: scale(1.5);
box-shadow: 0 0 30px rgba(255, 255, 255, 1);
}
:root[data-theme="dark"] a:hover ~ .cursor-border,
:root[data-theme="dark"] button:hover ~ .cursor-border {
transform: scale(1.2);
border-color: rgba(255, 255, 255, 1);
box-shadow:
0 0 40px rgba(255, 255, 255, 0.8),
inset 0 0 40px rgba(255, 255, 255, 0.7);
}
:root[data-theme="light"] a:hover ~ .cursor,
:root[data-theme="light"] button:hover ~ .cursor {
transform: scale(1.5);
box-shadow: 0 0 30px rgba(0, 0, 0, 0.7);
}
:root[data-theme="light"] a:hover ~ .cursor-border,
:root[data-theme="light"] button:hover ~ .cursor-border {
transform: scale(1.2);
border-color: rgba(0, 0, 0, 0.9);
box-shadow:
0 0 40px rgba(0, 0, 0, 0.5),
inset 0 0 40px rgba(0, 0, 0, 0.4);
}
.cursor {
width: 15px;
height: 15px;
border-radius: 50%;
position: fixed;
pointer-events: none;
z-index: 9999;
transform: translate(-50%, -50%);
transition: transform 0.2s ease;
}
.cursor-border {
width: 40px;
height: 40px;
position: fixed;
pointer-events: none;
z-index: 9998;
transform: translate(-50%, -50%);
transition: transform 0.2s ease;
}
</style>
</head>
<body>
<div class="cursor"></div>
<div class="cursor-border"></div>
<button class="theme-toggle" onclick="toggleTheme()" title="切换主题">
<div id="theme-icon">🌙</div>
</button>
<div class="stars"></div>
<div class="container">
<div class="glitch-wrapper">
<div class="glitch">404</div>
</div>
<div class="message">很抱歉，您要访问的页面已经消失在平行宇宙中了...</div>
<div class="message">但请不要担心，让我们一起回到现实世界吧！</div>
<a href="https://blog.rsdld.top/" class="home-button">返回首页</a>
</div>
<script>
function toggleTheme() {
const html = document.documentElement;
const themeIcon = document.getElementById('theme-icon');
const currentTheme = html.getAttribute('data-theme');
const stars = document.querySelector('.stars');
const transition = document.createElement('div');
transition.className = 'theme-transition';
document.body.appendChild(transition);
transition.offsetHeight;
transition.classList.add('active');
if (currentTheme === 'dark') {
html.setAttribute('data-theme', 'light');
themeIcon.textContent = '☀️';
localStorage.setItem('theme', 'light');
stars.style.opacity = '0';
setTimeout(() => {
stars.innerHTML = '';
}, 300);
} else {
html.setAttribute('data-theme', 'dark');
themeIcon.textContent = '🌙';
localStorage.setItem('theme', 'dark');
createStars();
requestAnimationFrame(() => {
stars.style.opacity = '1';
});
}
setTimeout(() => {
transition.classList.remove('active');
setTimeout(() => {
transition.remove();
}, 300);
}, 200);
}
document.addEventListener('DOMContentLoaded', () => {
const savedTheme = localStorage.getItem('theme') || 'dark';
const themeIcon = document.getElementById('theme-icon');
document.documentElement.setAttribute('data-theme', savedTheme);
themeIcon.textContent = savedTheme === 'dark' ? '🌙' : '☀️';
if (savedTheme === 'dark') {
createStars();
}
});
function createStars() {
const stars = document.querySelector('.stars');
const count = 300;
for (let i = 0; i < count; i++) {
const star = document.createElement('div');
star.className = 'star';
const startX = Math.random() * window.innerWidth;
const startY = Math.random() * window.innerHeight;
const moveX = window.innerWidth * 0.3;
const moveY = -window.innerHeight * 0.3;
const size = 0.5 + Math.random() * 1.5;
const duration = 10 + Math.random() * 10;
star.style.left = `${startX}px`;
star.style.top = `${startY}px`;
star.style.width = `${size}px`;
star.style.height = `${size}px`;
star.style.setProperty('--duration', `${duration}s`);
star.style.setProperty('--move-x', `${moveX}px`);
star.style.setProperty('--move-y', `${moveY}px`);
star.addEventListener('animationend', () => {
star.remove();
createStar();
});
stars.appendChild(star);
}
}
function createStar() {
const stars = document.querySelector('.stars');
const star = document.createElement('div');
star.className = 'star';
const startX = Math.random() * window.innerWidth;
const startY = Math.random() * window.innerHeight;
const moveX = window.innerWidth * 0.3;
const moveY = -window.innerHeight * 0.3;
const size = 0.5 + Math.random() * 1.5;
const duration = 10 + Math.random() * 10;
star.style.left = `${startX}px`;
star.style.top = `${startY}px`;
star.style.width = `${size}px`;
star.style.height = `${size}px`;
star.style.setProperty('--duration', `${duration}s`);
star.style.setProperty('--move-x', `${moveX}px`);
star.style.setProperty('--move-y', `${moveY}px`);
star.addEventListener('animationend', () => {
star.remove();
createStar();
});
stars.appendChild(star);
}
document.addEventListener('DOMContentLoaded', () => {
const cursor = document.querySelector('.cursor');
const cursorBorder = document.querySelector('.cursor-border');
let mouseX = 0;
let mouseY = 0;
let cursorX = 0;
let cursorY = 0;
function animate() {
cursor.style.left = `${mouseX}px`;
cursor.style.top = `${mouseY}px`;
const distX = mouseX - cursorX;
const distY = mouseY - cursorY;
cursorX += distX * 0.15;
cursorY += distY * 0.15;
cursorBorder.style.left = `${cursorX}px`;
cursorBorder.style.top = `${cursorY}px`;
requestAnimationFrame(animate);
}
document.addEventListener('mousemove', (e) => {
mouseX = e.clientX;
mouseY = e.clientY;
if (cursorX === 0) {
cursorX = mouseX;
cursorY = mouseY;
}
});
document.addEventListener('mousedown', () => {
cursor.style.transform = 'translate(-50%, -50%) scale(0.8)';
cursorBorder.style.transform = 'translate(-50%, -50%) scale(0.8)';
});
document.addEventListener('mouseup', () => {
cursor.style.transform = 'translate(-50%, -50%) scale(1)';
cursorBorder.style.transform = 'translate(-50%, -50%) scale(1)';
});
requestAnimationFrame(animate);
});
</script>
</body>
</html> 
哈哈哈