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;
}