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;
}
领取完整源码
25款404网页源码地址：https://www.123pan.com/s/ji8kjv-VjPU3.html
下期更新
孤客支付系统
- 📢本人公众号：祖龙科技工作室
- 📢博客主页：孤客网络科技工作室官方账号
- 📢欢迎点赞👍收藏⭐️留言 📝如有错误敬请指正！
- 📢本文由孤客原创，若侵权联系作者，首发于CSDN博客
- 📢停下休息的时候不要忘了别人还在奔跑，希望大家抓紧时间学习，全力奔赴更好的生活💻