css 还不错的404页面
见到了一个还不错的404页面，新建一个html，粘贴进去，可以直接打开了
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <title>404title>
8 <style>
9 body {
10 margin: 0;
11 font-size: 20px;
12 }
13
14 * {
15 box-sizing: border-box;
16 }
17
18 .container {
19 position: relative;
20 display: flex;
21 align-items: center;
22 justify-content: center;
23 height: 100vh;
24 background: white;
25 color: black;
26 font-family: arial, sans-serif;
27 overflow: hidden;
28 }
29
30 .content {
31 position: relative;
32 width: 600px;
33 max-width: 100%;
34 margin: 20px;
35 background: white;
36 padding: 60px 40px;
37 text-align: center;
38 box-shadow: -10px 10px 67px -12px rgba(0, 0, 0, 0.2);
39 opacity: 0;
40 animation: apparition 0.8s 1.2s cubic-bezier(0.39, 0.575, 0.28, 0.995) forwards;
41 }
42
43 .content p {
44 font-size: 1.3rem;
45 margin-top: 0;
46 margin-bottom: 0.6rem;
47 letter-spacing: 0.1rem;
48 color: #595959;
49 }
50
51 .content p:last-child {
52 margin-bottom: 0;
53 }
54
55 .content button {
56 display: inline-block;
57 margin-top: 2rem;
58 padding: 0.5rem 1rem;
59 border: 3px solid #595959;
60 background: transparent;
61 font-size: 1rem;
62 color: #595959;
63 text-decoration: none;
64 cursor: pointer;
65 font-weight: bold;
66 }
67
68 .particle {
69 position: absolute;
70 display: block;
71 pointer-events: none;
72 }
73
74 .particle:nth-child(1) {
75 top: 25.3968253968%;
76 left: 93.2286555447%;
77 font-size: 19px;
78 filter: blur(0.02px);
79 animation: 28s float2 infinite;
80 }
81
82 .particle:nth-child(2) {
83 top: 19.536019536%;
84 left: 70.6575073602%;
85 font-size: 19px;
86 filter: blur(0.04px);
87 animation: 22s floatReverse2 infinite;
88 }
89
90 .particle:nth-child(3) {
91 top: 81.2575574365%;
92 left: 73.0282375852%;
93 font-size: 27px;
94 filter: blur(0.06px);
95 animation: 28s floatReverse2 infinite;
96 }
97
98 .particle:nth-child(4) {
99 top: 95.2147239264%;
100 left: 28.5714285714%;
101 font-size: 15px;
102 filter: blur(0.08px);
103 animation: 22s float2 infinite;
104 }
105
106 .particle:nth-child(5) {
107 top: 87.1670702179%;
108 left: 48.7329434698%;
109 font-size: 26px;
110 filter: blur(0.1px);
111 animation: 33s float infinite;
112 }
113
114 .particle:nth-child(6) {
115 top: 89.6551724138%;
116 left: 20.7509881423%;
117 font-size: 12px;
118 filter: blur(0.12px);
119 animation: 38s float infinite;
120 }
121
122 .particle:nth-child(7) {
123 top: 34.5252774353%;
124 left: 32.6409495549%;
125 font-size: 11px;
126 filter: blur(0.14px);
127 animation: 29s float infinite;
128 }
129
130 .particle:nth-child(8) {
131 top: 34.188034188%;
132 left: 70.6575073602%;
133 font-size: 19px;
134 filter: blur(0.16px);
135 animation: 22s float2 infinite;
136 }
137
138 .particle:nth-child(9) {
139 top: 10.7843137255%;
140 left: 1.968503937%;
141 font-size: 16px;
142 filter: blur(0.18px);
143 animation: 31s float2 infinite;
144 }
145
146 .particle:nth-child(10) {
147 top: 12.7450980392%;
148 left: 0.9842519685%;
149 font-size: 16px;
150 filter: blur(0.2px);
151 animation: 34s float2 infinite;
152 }
153
154 .particle:nth-child(11) {
155 top: 75.3977968176%;
156 left: 56.0471976401%;
157 font-size: 17px;
158 filter: blur(0.22px);
159 animation: 35s floatReverse2 infinite;
160 }
161
162 .particle:nth-child(12) {
163 top: 79.322853688%;
164 left: 43.8169425511%;
165 font-size: 27px;
166 filter: blur(0.24px);
167 animation: 25s float2 infinite;
168 }
169
170 .particle:nth-child(13) {
171 top: 16.52490887%;
172 left: 76.2463343109%;
173 font-size: 23px;
174 filter: blur(0.26px);
175 animation: 34s floatReverse infinite;
176 }
177
178 .particle:nth-child(14) {
179 top: 36.3190184049%;
180 left: 44.3349753695%;
181 font-size: 15px;
182 filter: blur(0.28px);
183 animation: 38s floatReverse2 infinite;
184 }
185
186 .particle:nth-child(15) {
187 top: 41.6464891041%;
188 left: 16.5692007797%;
189 font-size: 26px;
190 filter: blur(0.3px);
191 animation: 39s floatReverse infinite;
192 }
193
194 .particle:nth-child(16) {
195 top: 91.7073170732%;
196 left: 93.137254902%;
197 font-size: 20px;
198 filter: blur(0.32px);
199 animation: 26s float infinite;
200 }
201
202 .particle:nth-child(17) {
203 top: 86.7469879518%;
204 left: 94.1747572816%;
205 font-size: 30px;
206 filter: blur(0.34px);
207 animation: 40s floatReverse infinite;
208 }
209
210 .particle:nth-child(18) {
211 top: 81.2729498164%;
212 left: 20.6489675516%;
213 font-size: 17px;
214 filter: blur(0.36px);
215 animation: 40s float2 infinite;
216 }
217
218 .particle:nth-child(19) {
219 top: 38.4236453202%;
220 left: 10.8695652174%;
221 font-size: 12px;
222 filter: blur(0.38px);
223 animation: 30s float infinite;
224 }
225
226 .particle:nth-child(20) {
227 top: 82.2249093108%;
228 left: 73.0282375852%;
229 font-size: 27px;
230 filter: blur(0.4px);
231 animation: 26s floatReverse2 infinite;
232 }
233
234 .particle:nth-child(21) {
235 top: 3.8787878788%;
236 left: 38.0487804878%;
237 font-size: 25px;
238 filter: blur(0.42px);
239 animation: 30s float infinite;
240 }
241
242 .particle:nth-child(22) {
243 top: 46.6585662211%;
244 left: 60.6060606061%;
245 font-size: 23px;
246 filter: blur(0.44px);
247 animation: 34s floatReverse infinite;
248 }
249
250 .particle:nth-child(23) {
251 top: 55.9509202454%;
252 left: 76.8472906404%;
253 font-size: 15px;
254 filter: blur(0.46px);
255 animation: 39s float2 infinite;
256 }
257
258 .particle:nth-child(24) {
259 top: 4.9321824908%;
260 left: 83.0860534125%;
261 font-size: 11px;
262 filter: blur(0.48px);
263 animation: 23s float infinite;
264 }
265
266 .particle:nth-child(25) {
267 top: 42.3124231242%;
268 left: 13.8203356367%;
269 font-size: 13px;
270 filter: blur(0.5px);
271 animation: 29s float infinite;
272 }
273
274 .particle:nth-child(26) {
275 top: 72.6380368098%;
276 left: 15.763546798%;
277 font-size: 15px;
278 filter: blur(0.52px);
279 animation: 31s floatReverse infinite;
280 }
281
282 .particle:nth-child(27) {
283 top: 67.6328502415%;
284 left: 40.8560311284%;
285 font-size: 28px;
286 filter: blur(0.54px);
287 animation: 29s floatReverse2 infinite;
288 }
289
290 .particle:nth-child(28) {
291 top: 49.156626506%;
292 left: 62.1359223301%;
293 font-size: 30px;
294 filter: blur(0.56px);
295 animation: 28s float infinite;
296 }
297
298 .particle:nth-child(29) {
299 top: 16.7076167076%;
300 left: 28.5996055227%;
301 font-size: 14px;
302 filter: blur(0.58px);
303 animation: 26s floatReverse infinite;
304 }
305
306 .particle:nth-child(30) {
307 top: 68.8484848485%;
308 left: 96.5853658537%;
309 font-size: 25px;
310 filter: blur(0.6px);
311 animation: 22s floatReverse2 infinite;
312 }
313
314 .particle:nth-child(31) {
315 top: 76.0048721072%;
316 left: 21.5475024486%;
317 font-size: 21px;
318 filter: blur(0.62px);
319 animation: 27s floatReverse2 infinite;
320 }
321
322 .particle:nth-child(32) {
323 top: 61.7647058824%;
324 left: 0.9842519685%;
325 font-size: 16px;
326 filter: blur(0.64px);
327 animation: 39s float infinite;
328 }
329
330 .particle:nth-child(33) {
331 top: 38.7878787879%;
332 left: 43.9024390244%;
333 font-size: 25px;
334 filter: blur(0.66px);
335 animation: 29s floatReverse infinite;
336 }
337
338 .particle:nth-child(34) {
339 top: 62.1454993835%;
340 left: 59.3471810089%;
341 font-size: 11px;
342 filter: blur(0.68px);
343 animation: 35s float infinite;
344 }
345
346 .particle:nth-child(35) {
347 top: 89.4348894349%;
348 left: 28.5996055227%;
349 font-size: 14px;
350 filter: blur(0.7px);
351 animation: 36s floatReverse infinite;
352 }
353
354 .particle:nth-child(36) {
355 top: 36.803874092%;
356 left: 82.8460038986%;
357 font-size: 26px;
358 filter: blur(0.72px);
359 animation: 35s floatReverse infinite;
360 }
361
362 .particle:nth-child(37) {
363 top: 63.4920634921%;
364 left: 50.0490677134%;
365 font-size: 19px;
366 filter: blur(0.74px);
367 animation: 28s floatReverse infinite;
368 }
369
370 .particle:nth-child(38) {
371 top: 71.9319562576%;
372 left: 92.8641251222%;
373 font-size: 23px;
374 filter: blur(0.76px);
375 animation: 30s float infinite;
376 }
377
378 .particle:nth-child(39) {
379 top: 36.4532019704%;
380 left: 26.6798418972%;
381 font-size: 12px;
382 filter: blur(0.78px);
383 animation: 39s float2 infinite;
384 }
385
386 .particle:nth-child(40) {
387 top: 54.1062801932%;
388 left: 78.7937743191%;
389 font-size: 28px;
390 filter: blur(0.8px);
391 animation: 30s float infinite;
392 }
393
394 .particle:nth-child(41) {
395 top: 81.2575574365%;
396 left: 69.1333982473%;
397 font-size: 27px;
398 filter: blur(0.82px);
399 animation: 35s float2 infinite;
400 }
401
402 .particle:nth-child(42) {
403 top: 87.7108433735%;
404 left: 35.9223300971%;
405 font-size: 30px;
406 filter: blur(0.84px);
407 animation: 24s float2 infinite;
408 }
409
410 .particle:nth-child(43) {
411 top: 75.7281553398%;
412 left: 30.2734375%;
413 font-size: 24px;
414 filter: blur(0.86px);
415 animation: 27s floatReverse2 infinite;
416 }
417
418 .particle:nth-child(44) {
419 top: 9.8039215686%;
420 left: 57.0866141732%;
421 font-size: 16px;
422 filter: blur(0.88px);
423 animation: 36s floatReverse2 infinite;
424 }
425
426 .particle:nth-child(45) {
427 top: 49.5145631068%;
428 left: 5.859375%;
429 font-size: 24px;
430 filter: blur(0.9px);
431 animation: 37s floatReverse infinite;
432 }
433
434 .particle:nth-child(46) {
435 top: 58.9371980676%;
436 left: 36.9649805447%;
437 font-size: 28px;
438 filter: blur(0.92px);
439 animation: 32s float infinite;
440 }
441
442 .particle:nth-child(47) {
443 top: 56.3791008505%;
444 left: 31.2805474096%;
445 font-size: 23px;
446 filter: blur(0.94px);
447 animation: 36s floatReverse2 infinite;
448 }
449
450 .particle:nth-child(48) {
451 top: 32.3529411765%;
452 left: 29.5275590551%;
453 font-size: 16px;
454 filter: blur(0.96px);
455 animation: 22s floatReverse2 infinite;
456 }
457
458 .particle:nth-child(49) {
459 top: 43.3734939759%;
460 left: 90.2912621359%;
461 font-size: 30px;
462 filter: blur(0.98px);
463 animation: 24s floatReverse2 infinite;
464 }
465
466 .particle:nth-child(50) {
467 top: 6.7714631197%;
468 left: 55.5014605648%;
469 font-size: 27px;
470 filter: blur(1px);
471 animation: 39s floatReverse2 infinite;
472 }
473
474 .particle:nth-child(51) {
475 top: 41.9512195122%;
476 left: 19.6078431373%;
477 font-size: 20px;
478 filter: blur(1.02px);
479 animation: 23s floatReverse infinite;
480 }
481
482 .particle:nth-child(52) {
483 top: 55.1390568319%;
484 left: 92.5024342746%;
485 font-size: 27px;
486 filter: blur(1.04px);
487 animation: 30s float infinite;
488 }
489
490 .particle:nth-child(53) {
491 top: 49.3946731235%;
492 left: 30.2144249513%;
493 font-size: 26px;
494 filter: blur(1.06px);
495 animation: 35s floatReverse infinite;
496 }
497
498 .particle:nth-child(54) {
499 top: 15.763546798%;
500 left: 4.9407114625%;
501 font-size: 12px;
502 filter: blur(1.08px);
503 animation: 35s floatReverse infinite;
504 }
505
506 .particle:nth-child(55) {
507 top: 94.403892944%;
508 left: 87.084148728%;
509 font-size: 22px;
510 filter: blur(1.1px);
511 animation: 28s floatReverse2 infinite;
512 }
513
514 .particle:nth-child(56) {
515 top: 80.490797546%;
516 left: 46.3054187192%;
517 font-size: 15px;
518 filter: blur(1.12px);
519 animation: 37s floatReverse2 infinite;
520 }
521
522 .particle:nth-child(57) {
523 top: 5.8041112455%;
524 left: 57.4488802337%;
525 font-size: 27px;
526 filter: blur(1.14px);
527 animation: 38s float2 infinite;
528 }
529
530 .particle:nth-child(58) {
531 top: 64.2335766423%;
532 left: 68.4931506849%;
533 font-size: 22px;
534 filter: blur(1.16px);
535 animation: 40s float2 infinite;
536 }
537
538 .particle:nth-child(59) {
539 top: 52.6829268293%;
540 left: 66.6666666667%;
541 font-size: 20px;
542 filter: blur(1.18px);
543 animation: 25s floatReverse infinite;
544 }
545
546 .particle:nth-child(60) {
547 top: 14.7783251232%;
548 left: 87.9446640316%;
549 font-size: 12px;
550 filter: blur(1.2px);
551 animation: 37s floatReverse2 infinite;
552 }
553
554 .particle:nth-child(61) {
555 top: 55.9509202454%;
556 left: 56.157635468%;
557 font-size: 15px;
558 filter: blur(1.22px);
559 animation: 26s floatReverse infinite;
560 }
561
562 .particle:nth-child(62) {
563 top: 57.3511543135%;
564 left: 86.0215053763%;
565 font-size: 23px;
566 filter: blur(1.24px);
567 animation: 21s floatReverse infinite;
568 }
569
570 .particle:nth-child(63) {
571 top: 16.4848484848%;
572 left: 84.8780487805%;
573 font-size: 25px;
574 filter: blur(1.26px);
575 animation: 36s float2 infinite;
576 }
577
578 .particle:nth-child(64) {
579 top: 67.4816625917%;
580 left: 81.5324165029%;
581 font-size: 18px;
582 filter: blur(1.28px);
583 animation: 29s floatReverse2 infinite;
584 }
585
586 .particle:nth-child(65) {
587 top: 52.0481927711%;
588 left: 13.5922330097%;
589 font-size: 30px;
590 filter: blur(1.3px);
591 animation: 25s float2 infinite;
592 }
593
594 .particle:nth-child(66) {
595 top: 91.8984280532%;
596 left: 4.8685491723%;
597 font-size: 27px;
598 filter: blur(1.32px);
599 animation: 37s float2 infinite;
600 }
601
602 .particle:nth-child(67) {
603 top: 47.8632478632%;
604 left: 35.3287536801%;
605 font-size: 19px;
606 filter: blur(1.34px);
607 animation: 32s floatReverse infinite;
608 }
609
610 .particle:nth-child(68) {
611 top: 10.6925880923%;
612 left: 64.5161290323%;
613 font-size: 23px;
614 filter: blur(1.36px);
615 animation: 39s float2 infinite;
616 }
617
618 .particle:nth-child(69) {
619 top: 33.0900243309%;
620 left: 8.8062622309%;
621 font-size: 22px;
622 filter: blur(1.38px);
623 animation: 33s floatReverse infinite;
624 }
625
626 .particle:nth-child(70) {
627 top: 83.8471023428%;
628 left: 66.2710187933%;
629 font-size: 11px;
630 filter: blur(1.4px);
631 animation: 23s floatReverse2 infinite;
632 }
633
634 .particle:nth-child(71) {
635 top: 45.4655380895%;
636 left: 76.9230769231%;
637 font-size: 27px;
638 filter: blur(1.42px);
639 animation: 21s floatReverse infinite;
640 }
641
642 .particle:nth-child(72) {
643 top: 67.8966789668%;
644 left: 87.8578479763%;
645 font-size: 13px;
646 filter: blur(1.44px);
647 animation: 38s floatReverse2 infinite;
648 }
649
650 .particle:nth-child(73) {
651 top: 91.064871481%;
652 left: 55.063913471%;
653 font-size: 17px;
654 filter: blur(1.46px);
655 animation: 32s float2 infinite;
656 }
657
658 .particle:nth-child(74) {
659 top: 85.1897184823%;
660 left: 5.8997050147%;
661 font-size: 17px;
662 filter: blur(1.48px);
663 animation: 35s float infinite;
664 }
665
666 .particle:nth-child(75) {
667 top: 60.1212121212%;
668 left: 3.9024390244%;
669 font-size: 25px;
670 filter: blur(1.5px);
671 animation: 25s floatReverse infinite;
672 }
673
674 .particle:nth-child(76) {
675 top: 65.8595641646%;
676 left: 14.6198830409%;
677 font-size: 26px;
678 filter: blur(1.52px);
679 animation: 22s float2 infinite;
680 }
681
682 .particle:nth-child(77) {
683 top: 72.2891566265%;
684 left: 56.3106796117%;
685 font-size: 30px;
686 filter: blur(1.54px);
687 animation: 34s float infinite;
688 }
689
690 .particle:nth-child(78) {
691 top: 50.2415458937%;
692 left: 71.9844357977%;
693 font-size: 28px;
694 filter: blur(1.56px);
695 animation: 29s floatReverse infinite;
696 }
697
698 .particle:nth-child(79) {
699 top: 77.4818401937%;
700 left: 25.3411306043%;
701 font-size: 26px;
702 filter: blur(1.58px);
703 animation: 21s floatReverse2 infinite;
704 }
705
706 .particle:nth-child(80) {
707 top: 0.9708737864%;
708 left: 69.3359375%;
709 font-size: 24px;
710 filter: blur(1.6px);
711 animation: 32s float infinite;
712 }
713
714 @keyframes apparition {
715 from {
716 opacity: 0;
717 transform: translateY(100px);
718 }
719
720 to {
721 opacity: 1;
722 transform: translateY(0);
723 }
724 }
725
726 @keyframes float {
727
728 0%,
729 100% {
730 transform: translateY(0);
731 }
732
733 50% {
734 transform: translateY(180px);
735 }
736 }
737
738 @keyframes floatReverse {
739
740 0%,
741 100% {
742 transform: translateY(0);
743 }
744
745 50% {
746 transform: translateY(-180px);
747 }
748 }
749
750 @keyframes float2 {
751
752 0%,
753 100% {
754 transform: translateY(0);
755 }
756
757 50% {
758 transform: translateY(28px);
759 }
760 }
761
762 @keyframes floatReverse2 {
763
764 0%,
765 100% {
766 transform: translateY(0);
767 }
768
769 50% {
770 transform: translateY(-28px);
771 }
772 }
773 </style>
774
775 </head>
776
777 <body>
778
779 <main class='container'>
780 <span class='particle'>4</span>
781 <span class='particle'>4</span>
782 <span class='particle'>4</span>
783 <span class='particle'>4</span>
784 <span class='particle'>4</span>
785 <span class='particle'>4</span>
786 <span class='particle'>4</span>
787 <span class='particle'>4</span>
788 <span class='particle'>4</span>
789 <span class='particle'>4</span>
790 <span class='particle'>4</span>
791 <span class='particle'>4</span>
792 <span class='particle'>4</span>
793 <span class='particle'>4</span>
794 <span class='particle'>4</span>
795 <span class='particle'>4</span>
796 <span class='particle'>4</span>
797 <span class='particle'>4</span>
798 <span class='particle'>4</span>
799 <span class='particle'>4</span>
800 <span class='particle'>4</span>
801 <span class='particle'>4</span>
802 <span class='particle'>4</span>
803 <span class='particle'>4</span>
804 <span class='particle'>4</span>
805 <span class='particle'>4</span>
806 <span class='particle'>4</span>
807 <span class='particle'>4</span>
808 <span class='particle'>4</span>
809 <span class='particle'>4</span>
810 <span class='particle'>4</span>
811 <span class='particle'>4</span>
812 <span class='particle'>4</span>
813 <span class='particle'>4</span>
814 <span class='particle'>4</span>
815 <span class='particle'>4</span>
816 <span class='particle'>4</span>
817 <span class='particle'>4</span>
818 <span class='particle'>4</span>
819 <span class='particle'>4</span>
820 <span class='particle'>0</span>
821 <span class='particle'>0</span>
822 <span class='particle'>0</span>
823 <span class='particle'>0</span>
824 <span class='particle'>0</span>
825 <span class='particle'>0</span>
826 <span class='particle'>0</span>
827 <span class='particle'>0</span>
828 <span class='particle'>0</span>
829 <span class='particle'>0</span>
830 <span class='particle'>0</span>
831 <span class='particle'>0</span>
832 <span class='particle'>0</span>
833 <span class='particle'>0</span>
834 <span class='particle'>0</span>
835 <span class='particle'>0</span>
836 <span class='particle'>0</span>
837 <span class='particle'>0</span>
838 <span class='particle'>0</span>
839 <span class='particle'>0</span>
840 <span class='particle'>0</span>
841 <span class='particle'>0</span>
842 <span class='particle'>0</span>
843 <span class='particle'>0</span>
844 <span class='particle'>0</span>
845 <span class='particle'>0</span>
846 <span class='particle'>0</span>
847 <span class='particle'>0</span>
848 <span class='particle'>0</span>
849 <span class='particle'>0</span>
850 <span class='particle'>0</span>
851 <span class='particle'>0</span>
852 <span class='particle'>0</span>
853 <span class='particle'>0</span>
854 <span class='particle'>0</span>
855 <span class='particle'>0</span>
856 <span class='particle'>0</span>
857 <span class='particle'>0</span>
858 <span class='particle'>0</span>
859 <span class='particle'>0</span>
860
861 </main>
862
863
864 </body>
865
866 </html>
忍一时，越想越气；
退一步，哎呦我去！
