Last active 1752812051

使用纯css,实现动画效果404页面源码

404.html Raw
1<!DOCTYPE html>
2<html lang="zh-CN">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>404 - 诗意之境</title>
7 <style>
8 * {
9 margin: 0;
10 padding: 0;
11 box-sizing: border-box;
12 }
13
14 body {
15 font-family: 'Helvetica Neue', Arial, sans-serif;
16 height: 100vh;
17 display: flex;
18 justify-content: center;
19 align-items: center;
20 overflow: hidden;
21 position: relative;
22 background: #f0f9ff;
23 }
24
25 /* 动态球体背景 */
26 .orb-container {
27 position: absolute;
28 top: 0;
29 left: 0;
30 width: 100%;
31 height: 100%;
32 overflow: hidden;
33 z-index: 0;
34 }
35
36 .orb {
37 position: absolute;
38 border-radius: 50%;
39 filter: blur(60px);
40 opacity: 0.7;
41 }
42
43 /* 大球体 */
44 .orb-large {
45 width: 400px;
46 height: 400px;
47 }
48
49 /* 中等球体 */
50 .orb-medium {
51 width: 250px;
52 height: 250px;
53 }
54
55 /* 小球体 */
56 .orb-small {
57 width: 150px;
58 height: 150px;
59 }
60
61 /* 浅蓝色球体 */
62 .orb-light {
63 background: #b2ebf2;
64 }
65
66 /* 深蓝色球体 */
67 .orb-dark {
68 background: #4dd0e1;
69 }
70
71 /* 球体动画 */
72 @keyframes orb-move-1 {
73 0%, 100% {
74 transform: translate(0, 0);
75 }
76 25% {
77 transform: translate(50vw, 25vh);
78 }
79 50% {
80 transform: translate(30vw, 60vh);
81 }
82 75% {
83 transform: translate(-20vw, 40vh);
84 }
85 }
86
87 @keyframes orb-move-2 {
88 0%, 100% {
89 transform: translate(0, 0);
90 }
91 33% {
92 transform: translate(-30vw, 20vh);
93 }
94 66% {
95 transform: translate(40vw, -10vh);
96 }
97 }
98
99 @keyframes orb-move-3 {
100 0%, 100% {
101 transform: translate(0, 0);
102 }
103 20% {
104 transform: translate(25vw, -15vh);
105 }
106 40% {
107 transform: translate(-15vw, 30vh);
108 }
109 60% {
110 transform: translate(10vw, 20vh);
111 }
112 80% {
113 transform: translate(-30vw, -10vh);
114 }
115 }
116
117 @keyframes orb-move-4 {
118 0%, 100% {
119 transform: translate(0, 0);
120 }
121 25% {
122 transform: translate(-40vw, 10vh);
123 }
124 50% {
125 transform: translate(20vw, -30vh);
126 }
127 75% {
128 transform: translate(15vw, 25vh);
129 }
130 }
131
132 @keyframes orb-move-5 {
133 0%, 100% {
134 transform: translate(0, 0);
135 }
136 30% {
137 transform: translate(35vw, 15vh);
138 }
139 60% {
140 transform: translate(-25vw, -20vh);
141 }
142 }
143
144 @keyframes orb-move-6 {
145 0%, 100% {
146 transform: translate(0, 0);
147 }
148 40% {
149 transform: translate(-15vw, 35vh);
150 }
151 80% {
152 transform: translate(20vw, -15vh);
153 }
154 }
155
156 /* 磨砂玻璃遮罩层 */
157 .frosted-overlay {
158 position: absolute;
159 top: 0;
160 left: 0;
161 width: 100%;
162 height: 100%;
163 background: rgba(255, 255, 255, 0.2);
164 backdrop-filter: blur(15px);
165 z-index: 1;
166 }
167
168 /* 内容容器 */
169 .content-container {
170 position: relative;
171 width: 90%;
172 max-width: 800px;
173 padding: 40px;
174 background-color: rgba(255, 255, 255, 0.7);
175 border-radius: 8px;
176 box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
177 text-align: center;
178 z-index: 2;
179 }
180
181 /* 四个小三角装饰 */
182 .content-container::before,
183 .content-container::after {
184 content: '';
185 position: absolute;
186 width: 20px;
187 height: 20px;
188 border: 2px solid rgba(76, 208, 225, 0.5);
189 z-index: 3;
190 }
191
192 .content-container::before {
193 top: 10px;
194 left: 10px;
195 border-right: none;
196 border-bottom: none;
197 }
198
199 .content-container::after {
200 bottom: 10px;
201 right: 10px;
202 border-left: none;
203 border-top: none;
204 }
205
206 .corner-top-right,
207 .corner-bottom-left {
208 position: absolute;
209 width: 20px;
210 height: 20px;
211 border: 2px solid rgba(76, 208, 225, 0.5);
212 z-index: 3;
213 }
214
215 .corner-top-right {
216 top: 10px;
217 right: 10px;
218 border-left: none;
219 border-bottom: none;
220 }
221
222 .corner-bottom-left {
223 bottom: 10px;
224 left: 10px;
225 border-right: none;
226 border-top: none;
227 }
228
229 h1 {
230 font-size: 4rem;
231 margin-bottom: 20px;
232 color: #00796b;
233 font-weight: 300;
234 }
235
236 .poem {
237 font-size: 1.5rem;
238 line-height: 1.6;
239 margin: 30px 0;
240 padding: 20px;
241 font-style: italic;
242 color: #00695c;
243 }
244
245 .message {
246 font-size: 1rem;
247 color: #555;
248 margin-top: 30px;
249 }
250
251 .countdown {
252 font-weight: bold;
253 color: #00796b;
254 }
255
256 .admin-message {
257 font-size: 0.8rem;
258 color: #888;
259 margin-top: 15px;
260 font-style: italic;
261 }
262
263 /* 响应式设计 */
264 @media (max-width: 768px) {
265 h1 {
266 font-size: 2.5rem;
267 }
268
269 .poem {
270 font-size: 1.2rem;
271 padding: 15px;
272 }
273
274 .message {
275 font-size: 0.9rem;
276 }
277 }
278
279 @media (max-width: 480px) {
280 h1 {
281 font-size: 2rem;
282 content: "即将跳转";
283 }
284
285 .content-container {
286 padding: 30px 20px;
287 }
288
289 .poem {
290 font-size: 1rem;
291 margin: 20px 0;
292 padding: 10px;
293 }
294
295 .message {
296 font-size: 0.8rem;
297 margin-top: 20px;
298 }
299
300 .admin-message {
301 font-size: 0.7rem;
302 }
303 }
304
305 /* 窄屏时隐藏原始h1内容,显示"即将跳转" */
306 @media (max-width: 480px) {
307 h1::after {
308 content: "即将跳转";
309 display: block;
310 }
311
312 h1 span {
313 display: none;
314 }
315 }
316 </style>
317</head>
318<body>
319 <div class="orb-container">
320 <!-- 大球体 -->
321 <div class="orb orb-large orb-light" style="top: 10%; left: 10%; animation: orb-move-1 25s infinite ease-in-out;"></div>
322 <div class="orb orb-large orb-dark" style="top: 60%; left: 70%; animation: orb-move-2 30s infinite ease-in-out;"></div>
323
324 <!-- 中等球体 -->
325 <div class="orb orb-medium orb-light" style="top: 30%; left: 50%; animation: orb-move-3 20s infinite ease-in-out;"></div>
326 <div class="orb orb-medium orb-dark" style="top: 70%; left: 20%; animation: orb-move-4 25s infinite ease-in-out;"></div>
327
328 <!-- 小球体 -->
329 <div class="orb orb-small orb-light" style="top: 20%; left: 80%; animation: orb-move-5 15s infinite ease-in-out;"></div>
330 <div class="orb orb-small orb-dark" style="top: 80%; left: 40%; animation: orb-move-6 18s infinite ease-in-out;"></div>
331 </div>
332
333 <div class="frosted-overlay"></div>
334
335 <div class="content-container">
336 <div class="corner-top-right"></div>
337 <div class="corner-bottom-left"></div>
338 <h1><span>404</span></h1>
339 <div class="poem" id="poem">正在寻找诗意的远方...</div>
340 <div class="message">
341 此路不通,即将引您重返人间<br>
342 <span class="countdown" id="countdown">10</span>秒后自动跳转
343 </div>
344 <div class="admin-message">该页面被管理员刻意的禁止访问</div>
345 </div>
346
347 <script>
348 // 获取一言
349 fetch('https://v2.xxapi.cn/api/yiyan?type=hitokoto')
350 .then(response => response.json())
351 .then(data => {
352 if(data.code === 200) {
353 document.getElementById('poem').textContent = data.data;
354 } else {
355 document.getElementById('poem').textContent = "寻寻觅觅,冷冷清清,凄凄惨惨戚戚。";
356 }
357 })
358 .catch(() => {
359 document.getElementById('poem').textContent = "海上生明月,天涯共此时。";
360 });
361
362 // 倒计时跳转
363 let seconds = 10;
364 const countdownElement = document.getElementById('countdown');
365 const timer = setInterval(() => {
366 seconds--;
367 countdownElement.textContent = seconds;
368
369 if(seconds <= 0) {
370 clearInterval(timer);
371 window.location.href = 'https://cdn.liiiu.cn';
372 }
373 }, 1000);
374 </script>
375</body>
376</html>