• 欢迎光临~

css 还不错的404页面

开发技术 开发技术 2022-10-18 次浏览

见到了一个还不错的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>

 

程序员灯塔
转载请注明原文链接:css 还不错的404页面
喜欢 (0)
违法和不良信息举报电话:022-22558618 举报邮箱:dljd@tidljd.com