HTML5创意404提示页面模板

zichenblog

于 2025-04-19 13:44:24 发布

阅读量689

点赞数 21

文章标签： css css3 html

本文链接：https://blog.youkuaiyun.com/zichenblog/article/details/147349800

版权

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>404 - 页面未找到</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: 'Arial', sans-serif;
background: #f8f9fa;
color: #333;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
overflow: hidden;
}

.container {
text-align: center;
position: relative;
z-index: 1;
}

h1 {
font-size: 10rem;
font-weight: 900;
margin: 0;
color: #3a4a6d;
position: relative;
text-shadow: 5px 5px 0 rgba(0,0,0,0.1);
}

h1::after {
content: '404';
position: absolute;
top: 0;
left: 0;
color: transparent;
background: linear-gradient(45deg, #6a11cb 0%, #2575fc 100%);
-webkit-background-clip: text;
background-clip: text;
z-index: -1;
animation: glitch 2s infinite alternate;
}

h2 {
font-size: 2rem;
margin-bottom: 20px;
color: #3a4a6d;
}

p {
font-size: 1.2rem;
margin-bottom: 30px;
max-width: 600px;
line-height: 1.6;
}

.btn {
display: inline-block;
padding: 12px 30px;
background: linear-gradient(45deg, #6a11cb 0%, #2575fc 100%);
color: white;
text-decoration: none;
border-radius: 50px;
font-weight: bold;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(106, 17, 203, 0.3);
position: relative;
overflow: hidden;
}

.btn:hover {
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(106, 17, 203, 0.4);
}

.btn:active {
transform: translateY(1px);
}

.btn::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(45deg, #2575fc 0%, #6a11cb 100%);
opacity: 0;
transition: opacity 0.3s ease;
z-index: -1;
}

.btn:hover::after {
opacity: 1;
}

.credit {
margin-top: 40px;
font-size: 0.9rem;
color: #666;
}

.credit a {
color: #6a11cb;
text-decoration: none;
}

/* 动画元素 */
.bubble {
position: absolute;
border-radius: 50%;
background: rgba(106, 17, 203, 0.1);
animation: float 15s infinite linear;
z-index: 0;
}

@keyframes float {
0% {
transform: translateY(0) rotate(0deg);
opacity: 1;
}
100% {
transform: translateY(-1000px) rotate(720deg);
opacity: 0;
}
}

@keyframes glitch {
0% {
transform: translate(0);
}
20% {
transform: translate(-5px, 5px);
}
40% {
transform: translate(-5px, -5px);
}
60% {
transform: translate(5px, 5px);
}
80% {
transform: translate(5px, -5px);
}
100% {
transform: translate(0);
}
}
</style>
</head>
<body>
<div class="container">
<h1>404</h1>
<h2>哎呀！页面不见了</h2>
<p>您访问的页面可能已被移除、重命名或暂时不可用。请检查您输入的URL是否正确，或者点击下面的按钮返回首页。</p>
<a href="/" class="btn">返回首页</a>
<div class="credit">
技术支持由 <a href="https://www.chuanqisifu.top" target="_blank">www.chuanqisifu.top</a> 提供
</div>
</div>


<script>
// 创建背景气泡
function createBubbles() {
const colors = ['rgba(106, 17, 203, 0.1)', 'rgba(37, 117, 252, 0.1)', 'rgba(58, 74, 109, 0.1)'];

for (let i = 0; i < 20; i++) {
const bubble = document.createElement('div');
bubble.classList.add('bubble');

// 随机大小
const size = Math.random() * 100 + 50;
bubble.style.width = `${size}px`;
bubble.style.height = `${size}px`;

// 随机位置
bubble.style.left = `${Math.random() * 100}%`;
bubble.style.bottom = `-${size}px`;

// 随机颜色
bubble.style.background = colors[Math.floor(Math.random() * colors.length)];

// 随机动画延迟和持续时间
bubble.style.animationDuration = `${Math.random() * 20 + 10}s`;
bubble.style.animationDelay = `${Math.random() * 5}s`;

document.body.appendChild(bubble);
}
}

// 页面加载后创建气泡
window.addEventListener('load', createBubbles);
</script>
</body>
</html>