-
Notifications
You must be signed in to change notification settings - Fork 0
/
404.html
130 lines (118 loc) · 3.2 KB
/
404.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!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>
/* 页面整体样式 */
body {
margin: 0;
padding: 0;
font-family: 'Arial', sans-serif;
background-color: #eee;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
text-align: center;
}
/* 404数字 */
h1 {
font-size: 150px;
color: #3498db;
margin: 0;
font-weight: bold;
text-shadow: 0 0 20px rgba(52, 152, 219, 0.5), 0 0 30px rgba(52, 152, 219, 0.3);
animation: bounce 1.5s ease-in-out infinite;
}
/* 动画：跳动效果 */
@keyframes bounce {
0% {
transform: scale(1);
}
30% {
transform: scale(1.1);
}
50% {
transform: scale(1);
}
70% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
/* 提示文本 */
p {
font-size: 22px;
color: #333;
margin-top: 20px;
opacity: 0;
animation: fadeIn 1s ease-in-out forwards;
}
/* 渐显效果 */
@keyframes fadeIn {
0% {
opacity: 0;
transform: translateY(30px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
/* 返回首页按钮 */
.btn {
display: inline-block;
background-color: #3498db;
color: white;
font-size: 18px;
padding: 12px 30px;
border-radius: 50px;
text-decoration: none;
margin-top: 30px;
transition: background-color 0.3s, transform 0.3s;
opacity: 0;
animation: fadeIn 2s ease-in-out forwards;
animation-delay: 1s;
}
/* 按钮悬停效果 */
.btn:hover {
background-color: #2980b9;
transform: translateY(-5px);
}
/* 背景闪烁效果 */
.stars {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('./images/404_background_stardust.png');
opacity: 0.1;
pointer-events: none;
animation: starsBlink 3s ease-in-out infinite;
}
/* 星星闪烁动画 */
@keyframes starsBlink {
0%, 100% {
opacity: 0.1;
}
50% {
opacity: 0.3;
}
}
</style>
</head>
<body>
<div class="stars"></div>
<div class="content">
<h1>404</h1>
<p>抱歉，您访问的资源不存在！</p>
<a href="javascript:history.go(-1);" class="btn">返回上一页</a>
</div>
</body>
</html>