25款404網頁源碼（上）

1
- 部分源碼
2
- 部分源碼
3
- 部分源碼
4
- 部分源碼
5
- 部分源碼
6
- 部分源碼
7
- 部分源碼
8
- 部分源碼
9
- 部分源碼
10
- 部分源碼
11
- 部分源碼
12
- 部分源碼
領取完整源碼
下期更新

1

在這里插入圖片描述

部分源碼

<!DOCTYPE html>
<html><!-- 優選源碼 gulang.love --><head><meta charset="utf-8"><title>Fargo 404</title><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Dosis:400,300,500,800"></body>
</html>

2

在這里插入圖片描述

部分源碼

 <g id="train"><path fill="#b3dcdf" d="M344.5 248.5h507.2v37.8H344.5z"/><g id="wheels"><circle class="st6" cx="384.1" cy="285.6" r="15.1"/><path class="st2" d="M384.1 295.7c-5.6 0-10.1-4.5-10.1-10.1s4.5-10.1 10.1-10.1 10.1 4.5 10.1 10.1c0 5.5-4.6 10.1-10.1 10.1z"/><circle class="st6" cx="416.1" cy="285.6" r="15.1"/><path class="st2" d="M416.1 295.7c-5.6 0-10.1-4.5-10.1-10.1s4.5-10.1 10.1-10.1 10.1 4.5 10.1 10.1c0 5.5-4.6 10.1-10.1 10.1z"/><circle class="st6" cx="469.1" cy="285.6" r="15.1"/><path class="st2" d="M469.1 295.7c-5.6 0-10.1-4.5-10.1-10.1s4.5-10.1 10.1-10.1 10.1 4.5 10.1 10.1c0 5.5-4.6 10.1-10.1 10.1z"/><circle class="st6" cx="734.1" cy="285.6" r="15.1"/><path class="st2" d="M734.1 295.7c-5.6 0-10.1-4.5-10.1-10.1s4.5-10.1 10.1-10.1 10.1 4.5 10.1 10.1c0 5.5-4.6 10.1-10.1 10.1z"/><circle class="st6" cx="766.1" cy="285.6" r="15.1"/><path class="st2" d="M766.1 295.7c-5.6 0-10.1-4.5-10.1-10.1s4.5-10.1 10.1-10.1 10.1 4.5 10.1 10.1c0 5.5-4.6 10.1-10.1 10.1z"/><circle class="st6" cx="821.1" cy="285.6" r="15.1"/><path class="st2" d="M821.1 295.7c-5.6 0-10.1-4.5-10.1-10.1s4.5-10.1 10.1-10.1 10.1 4.5 10.1 10.1c0 5.5-4.6 10.1-10.1 10.1z"/></g><path id="bracefront" class="st7" d="M383.2 285.6h88.1"/><path id="braceback" class="st7" d="M733.2 285.6h88.1"/><g id="car-layers"><path id="car" class="st8" d="M321.8 300.7v-32.4s1.2.7-1.5-2.4v-29.1s3.1-11.6 10.7-21.1c0 0 7.6-12 15.5-17.5h1.3s10.2-4.9 30.9-28h.6s-.9-1.4 0-2.7c0 0 10.1-10.5 21-12.3 0 0 9.4-1.8 20.2-1.8h47.7V151H492v-1.1h10.1v1.1h19v2.2s8.2.9 19.2-4.2c0 0 1.4-1.1 28.8-1.1h291.5v6.8h7.5v2.2s12.2-.6 12.2 9.8V177l-10-.1v57.9s14.9-.5 14.9 10.2c0 0 1 9-14.9 8.9v3.8H719.5s-2.4.1-4.3 3l-15 29s-2.9 5.1-10.8 5.1H504.3s-2.9.1-6.1-5l-13.1-25s-4.5-7.1-11.8-7.1H369v2.4s-3.2 1.3-7.1 8.7L351.4 289s-2.9 6.3-6.9 6.4h-17.8l-4.9 5.3z"/><path id="streamline-outine" class="st8" d="M320.3 236.6s1.4-6.8 4.4-11.3c0 0 .1-2.3 23.2-6.3l78-16.6s103.3-21.1 134.9-26.1c0 0 93.3-16 120.5-17.9 0 0 57.6-4.3 100-4.1h88.9v63.4s-10.3 5.4-17.1 5.3c0 0-305.6 4.9-366.3 8.1 0 0-100.3 4.8-119.1 6.8 0-.1-46.6 1.2-47.4-1.3z"/><g id="window-grate"><path class="st9" d="M739.5 182.6H854"/><path class="st9" d="M739.5 177.6H854"/><path class="st9" d="M739.5 172.6H854"/><path class="st9" d="M739.5 167.6H854"/><path class="st9" d="M739.5 161.4H854v26.1H739.5z"/></g><path class="st9" d="M320.3 257.8h549.9"/><g id="Text"><text transform="translate(377.037 230.025)" class="st8 st10" font-size="21">404</text><text transform="translate(659.5 213.994)" class="st8 st10" font-size="24.025">Page not found.</text></g><g id="ladders"><g id="ladder-f"><path id="front-ladder" class="st8" d="M433.8 258.4h17.8v34.8h-17.8z"/><path id="fb-rung" class="st9" d="M433.8 281.1h17.7"/><path id="ft-rung" class="st9" d="M433.8 268.6h17.7"/></g>

3

在這里插入圖片描述

部分源碼

<style>* {margin: 0;padding: 0;
}html {height: 100%;overflow: hidden;
}canvas {z-index: 1;position: absolute;left: 0;top: 0;width: 100%;height: 100%;
}.caps {z-index: 2;position: absolute;left: 0;top: 0;width: 100%;height: 100%;opacity: 0;animation: as 8s linear infinite;
}.caps img {display: block;width: 100%;height: 100%;
}

4

在這里插入圖片描述

部分源碼

body {display: flex;align-items: center;justify-content: center;font-family: "Nunito Sans";color: var(--blue);font-size: 1em;
}button {font-family: "Nunito Sans";
}ul {list-style-type: none;-webkit-padding-start: 35px;padding-inline-start: 35px;
}svg {width: 100%;visibility: hidden;
}h1 {font-size: 7.5em;margin: 15px 0px;font-weight: bold;
}h2 {font-weight: bold;
}.hamburger-menu {position: absolute;top: 0;left: 0;padding: 35px;z-index: 2;
}
.hamburger-menu button {position: relative;width: 30px;height: 22px;border: none;background: none;padding: 0;cursor: pointer;
}

5

在這里插入圖片描述

部分源碼

.static {width: 100%;height: 100%;position: relative;margin: 0;padding: 0;top: -100px;opacity: 0.05;z-index: 230;user-select: none;user-drag: none;
}.error {text-align: center;font-family: 'Gilda Display', serif;font-size: 95px;font-style: italic;text-align: center;width: 100px;height: 60px;line-height: 60px;margin: auto;position: absolute;top: 0;bottom: 0;left: -60px;right: 0;animation: noise 2s linear infinite;overflow: default;
}

6

在這里插入圖片描述

部分源碼

<g id="OBJECTS"><g id="Group"><path id="Vector" d="M101.3 255.2C101.3 255.2 111.1 272.6 181.8 280.5C252.5 288.4 288.2 314.9 333.1 322.8C378 330.7 433.6 278.5 481.8 286.5C530 294.4 588.2 264.2 592.8 255.2H101.3Z" fill="#2F1829"/><path id="Vector_2" d="M611.9 251.7H601.4L140.8 251.8C140.8 251.8 136.1 248.1 128.9 241.8C125.8 239.1 122.2 235.9 118.3 232.3C116.9 231 115.4 229.6 113.9 228.2C100.2 215.3 83.6 198.2 70.1 180.1C55.9 161 45.1 140.6 44.8 122.6C44.8 122.2 44.8 121.8 44.8 121.4C45 104 48.4 85.1 56.9 67.7C61.9 57.5 68.5 47.8 77.3 39C100.1 16.2 137.1 0.300011 194.5 0.800011C261.4 1.30001 330.8 26.3 393.5 60.8C406.6 68 419.4 75.7 431.9 83.6C441.1 89.5 450.1 95.5 458.8 101.6C483.1 118.6 505.6 136.4 525.5 153.8C570.6 193.1 602.3 230.4 611.9 251.7Z" fill="url(#paint0_linear)"/><path id="Vector_3" opacity="0.45" d="M611.9 251.7H601.4L140.8 251.8C140.8 251.8 136.1 248.1 128.9 241.8C125.8 239.1 122.2 235.9 118.3 232.3C116.9 231 115.4 229.6 113.9 228.2C100.2 215.3 83.6 198.2 70.1 180.1C55.9 161 45.1 140.6 44.8 122.6C50.5 119.6 63.9 113.5 75 116.3C89.5 119.9 92.6 137.2 92.6 137.2C92.6 137.2 103 128.8 113.9 132.8C124.8 136.8 126.5 148.4 126.5 148.4C126.5 148.4 139.4 141.8 150.9 144.6C162.5 147.4 171.8 158.6 159.4 165.9C147.1 173.1 133.3 167.5 132.9 167.4C133.1 167.6 137.9 174.2 129.1 182.2C120.1 190.4 154.6 197.5 154.6 197.5C154.6 197.5 155.9 175.1 179 177.6C202.1 180.1 220.8 192.6 220.8 192.6C220.8 192.6 222 158.3 240.5 152C259 145.7 268.5 165.9 268.5 165.9C268.5 165.9 309.5 139.4 323.4 164.1C337.3 188.8 337.9 193.5 337.9 193.5C337.9 193.5 349.8 128.5 387 131.5C424.2 134.5 431.1 160.3 430.5 162.9C429.9 165.5 441.2 146.2 452.4 156.7C463.6 167.2 470.1 181.8 470.1 181.8L529 174.9C529 174.9 523 163.3 525.4 153.8C570.6 193.1 602.3 230.4 611.9 251.7Z" fill="url(#paint1_linear)"/><path id="Vector_4" d="M431.9 83.6H257.8C279.6 83.6 283.9 75.7 296.8 71.4C297.4 71.2 298 71 298.6 70.9C310.7 67.8 320.6 74.7 328.3 74.4C336.4 74.1 345.3 65.5 354.6 62.5C357.7 61.5 361 61.8 364.3 62.6C370.8 64.1 377.6 67.4 384.5 66.1C390.5 65 391 62.5 393.4 60.8C406.6 68 419.5 75.6 431.9 83.6Z" fill="url(#paint2_linear)"/><path id="Vector_5" d="M206.5 67.7H56.9C61.8 57.7 68.3 48.1 76.9 39.4C77 39.3 77.2 39.1 77.3 39C80.8 38.3 84.6 37.8 88.7 37.6C112.4 36.6 117.4 54.5 117.4 54.5C117.4 54.5 123.6 46.2 134.8 50.2C146 54.2 142.1 59.1 151 61.8C152.2 62.1 153.4 62.2 154.7 62.1C163.2 61.4 173.9 52.1 183.4 55.5C194.4 59.4 187.3 67.7 206.5 67.7Z" fill="url(#paint3_linear)"/><path id="Vector_6" d="M631.8 258.5H75.5C73.6 258.5 72.1 257 72.1 255.1C72.1 253.2 73.6 251.7 75.5 251.7H631.8C633.7 251.7 635.2 253.2 635.2 255.1C635.2 257 633.7 258.5 631.8 258.5Z" fill="#2F1829"/><path id="Vector_7" opacity="0.25" d="M364.4 62.5C354.5 65 343.3 75.8 336 77.4C326.9 79.4 316.3 74.8 306 72.2C302.9 71.4 300.5 71 298.6 70.8C310.7 67.7 320.6 74.6 328.3 74.3C336.4 74 345.3 65.4 354.6 62.4C357.8 61.4 361 61.7 364.4 62.5Z" fill="white"/><path id="Vector_8" opacity="0.25" d="M154.7 62.1C145.8 66.8 141.6 56.2 133.9 52.7C125 48.7 118.7 61.2 116.1 59C113.5 56.9 112.3 47.6 102.2 42.8C96.5 40.1 85.4 39.5 77 39.5C77.1 39.4 77.3 39.2 77.4 39.1C80.9 38.4 84.7 37.9 88.8 37.7C112.5 36.7 117.5 54.6 117.5 54.6C117.5 54.6 123.7 46.3 134.9 50.3C146.1 54.3 142.2 59.2 151.1 61.9C152.2 62.1 153.5 62.2 154.7 62.1Z" fill="white"/><path id="Vector_9" d="M394.9 40.3C394.9 40.3 457.4 96.1 482.1 88.5C507 80.9 351.2 7.20001 394.9 40.3Z" fill="url(#paint4_linear)"/><path id="Vector_10" d="M35 97C35 97 13.7 134.4 50.9 173.8C59.5 182.9 60.5 199.9 43.3 200.8C26.1 201.7 -0.599994 159.8 0.300006 126.1C1.30001 92.4 40.8 77.1 35 97Z" fill="url(#paint5_linear)"/><path id="Vector_11" d="M461 295.7C461 295.7 425 303.6 415.8 315.9C411.3 321.9 429.2 321 444.5 314.4C460.5 307.5 473.6 294.9 461 295.7Z" fill="#2F1829"/><path id="Vector_12" d="M200.2 293.4C200.2 293.4 214.2 293.1 226.5 297.9C238.8 302.7 241.5 317.4 229.2 319.2C217 321 189.1 304.7 190.7 298.1C191.9 293.1 200.2 293.4 200.2 293.4Z" fill="#2F1829"/></g>

7

在這里插入圖片描述

部分源碼

 function initialize() {container = document.querySelector( '.fof' );canvas = document.querySelector( '.fof>canvas' );if( canvas ) {canvas.width = DISPLAY_WIDTH;canvas.height = DISPLAY_HEIGHT;context = canvas.getContext( '2d' );window.addEventListener( 'mousemove', function( event ) {mouse.x = event.clientX;mouse.y = event.clientY;}, false );eyes = [new Eye( canvas,   0.19, 0.80,   0.88,    0.31 ), new Eye( canvas,   0.10, 0.54,   0.84,    0.32 ), new Eye( canvas,   0.81, 0.13,   0.63,    0.33 ), new Eye( canvas,   0.89, 0.19,   0.58,    0.34 ), new Eye( canvas,   0.40, 0.08,   0.97,    0.35 ), new Eye( canvas,   0.64, 0.74,   0.57,    0.36 ), new Eye( canvas,   0.41, 0.89,   0.56,    0.37 ), new Eye( canvas,   0.92, 0.89,   0.75,    0.38 ), new Eye( canvas,   0.27, 0.20,   0.87,    0.39 ), new Eye( canvas,   0.17, 0.46,   0.68,    0.41 ), new Eye( canvas,   0.71, 0.29,   0.93,    0.42 ), new Eye( canvas,   0.84, 0.46,   0.54,    0.43 ), new Eye( canvas,   0.93, 0.35,   0.63,    0.44 ), new Eye( canvas,   0.77, 0.82,   0.85,    0.45 ), new Eye( canvas,   0.36, 0.74,   0.90,    0.46 ), new Eye( canvas,   0.13, 0.24,   0.85,    0.47 ), new Eye( canvas,   0.58, 0.20,   0.77,    0.48 ), new Eye( canvas,   0.55, 0.84,   0.87,    0.50 ), new Eye( canvas,   0.50, 0.50,   5.00,    0.10 ),];

8

在這里插入圖片描述

部分源碼

.wrapper .container .p404:nth-of-type(2) {color: #36184F;z-index: 1;animation-delay: 1s;filter: blur(10px);opacity: 0.8;
}
.wrapper .container .circle {position: absolute;
}
.wrapper .container .circle:before {content: "";position: absolute;width: 800px;height: 800px;background-color: rgba(54, 24, 79, 0.2);border-radius: 100%;top: 50%;left: 50%;transform: translate(-50%, -50%);box-shadow: inset 5px 20px 40px rgba(54, 24, 79, 0.25), inset 5px 0px 5px rgba(50, 36, 62, 0.3), inset 5px 5px 20px rgba(50, 36, 62, 0.25), 2px 2px 5px rgba(255, 255, 255, 0.2);animation: circle 0.8s cubic-bezier(1, 0.06, 0.25, 1) backwards;
}
@keyframes circle {0% {width: 0;height: 0;}
}

9

在這里插入圖片描述

部分源碼

.error-container {text-align: center;font-size: 106px;font-family: 'Catamaran', sans-serif;font-weight: 800;margin: 70px 15px;
}
.error-container > span {display: inline-block;position: relative;
}
.error-container > span.four {width: 136px;height: 43px;border-radius: 999px;background:linear-gradient(140deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.07) 43%, transparent 44%, transparent 100%),linear-gradient(105deg, transparent 0%, transparent 40%, rgba(0, 0, 0, 0.06) 41%, rgba(0, 0, 0, 0.07) 76%, transparent 77%, transparent 100%),linear-gradient(to right, #d89ca4, #e27b7e);
}
.error-container > span.four:before,
.error-container > span.four:after {content: '';display: block;position: absolute;border-radius: 999px;
}
.error-container > span.four:before {width: 43px;height: 156px;left: 60px;bottom: -43px;background:linear-gradient(128deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.07) 40%, transparent 41%, transparent 100%),linear-gradient(116deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.07) 50%, transparent 51%, transparent 100%),linear-gradient(to top, #99749D, #B895AB, #CC9AA6, #D7969E, #E0787F);
}

10

在這里插入圖片描述

部分源碼

* {margin: 0;padding: 0;-webkit-text-size-adjust: none;
}html, body {height: 100%;overflow: hidden;
}body {padding: 0;margin: 0;background: #181828;font-size: 14px;line-height: 1;
}label {cursor: pointer;
}a {margin: 0;padding: 0;vertical-align: baseline;background: transparent;text-decoration: none;color: #000;
}

11

在這里插入圖片描述

部分源碼

 .content {width: 500px;height: 300px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);-webkit-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);background-color: #333;padding: 45px 20px 20px;box-sizing: border-box;box-shadow: 0 0 25px rgba(0, 0, 0, .5);border-radius: 5px 5px 0 0;}.browser-bar {background: #f9f9f3;position: absolute;top: 0;left: 0;right: 0;padding: 5px;overflow: hidden;border-radius: 5px 5px 0 0;}

12

在這里插入圖片描述

部分源碼

.page {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 800px;height: 600px;z-index: 1;font-family: Roboto, sans-serif;background: #0D0C1E;border-radius: 10px;overflow: hidden;box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}/*--------------------
Header
--------------------*/
header {padding: 30px;
}
header .logo {margin: 0 auto;text-align: center;margin-bottom: -17px;
}
header .logo svg {width: 61px;height: 14px;
}
header nav {cursor: pointer;width: 18px;height: 18px;position: relative;float: left;
}