Like 0
Fork 0

Last active 3 months ago

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

404 html page

LiuShen's Avatar LiuShen revised this gist 3 months ago. Go to revision

1 file changed, 376 insertions

404.html(file created)

@@ -0,0 +1,376 @@
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>
Newer Older

Powered by Opengist ⋅ Load: 66ms⋅

English
⋅ 个人主页 ⋅ 站长博客