404错误页面源码模板大全,代码免费提供下载4️⃣0️⃣4️⃣
404代码的由来
4️⃣0️⃣4️⃣
404是一个http错误代码，指的是网页不存在。这些错误代码是一个叫Tim Berners-Lee定义的。他在1990年开发了世界上第一款网页浏览器。http错误代码是在ftp 错误代码的基础上演变而来的。
404代码的含义
第一个4表示客户端出错，第二个0表示你把网址打错了；最后表示这个错误代码在4开头的错误代码中排行老四。(潘进雄)
推荐svg动画效果404错误页代码
DOCTYPE html>
<html><head><meta charset="utf-8"><title>404 酷炫纯静态svg动画 错误页 - ooyang.cntitle><style>@import url('https://fonts.googleapis.com/css?family=Audiowide&display=swap');html,
body{margin: 0px;overflow: hidden;
}div{position: absolute;top: 0%;left: 0%;height: 100%;width: 100%;margin: 0px;background: radial-gradient(circle, #240015 0%, #12000b 100%);overflow: hidden;
}.wrap{position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);
}h2{position: absolute;top: 50%;left: 50%;margin-top: 150px;font-size: 32px;text-transform: uppercase;transform: translate(-50%, -50%);display: block;color: #12000a;font-weight: 300;font-family: Audiowide;text-shadow: 0px 0px 4px #12000a;animation: fadeInText 3s ease-in 3.5s forwards, flicker4 5s linear 7.5s infinite, hueRotate 6s ease-in-out 3s infinite;
}#svgWrap_1,
#svgWrap_2{position: absolute;height: auto;width: 600px;max-width: 100%;top: 50%;left: 50%;transform: translate(-50%, -50%);
}#svgWrap_1,
#svgWrap_2,
div{animation: hueRotate 6s ease-in-out 3s infinite;
}#id1_1,
#id2_1,
#id3_1{stroke: #ff005d;stroke-width: 3px;fill: transparent;filter: url(#glow);
}#id1_2,
#id2_2,
#id3_2{stroke: #12000a;stroke-width: 3px;fill: transparent;filter: url(#glow);
}#id3_1{stroke-dasharray: 940px;stroke-dashoffset: -940px;animation: drawLine3 2.5s ease-in-out 0s forwards, flicker3 4s linear 4s infinite;
}#id2_1{stroke-dasharray: 735px;stroke-dashoffset: -735px;animation: drawLine2 2.5s ease-in-out 0.5s forwards, flicker2 4s linear 4.5s infinite;
}#id1_1{stroke-dasharray: 940px;stroke-dashoffset: -940px;animation: drawLine1 2.5s ease-in-out 1s forwards, flicker1 4s linear 5s infinite;
}@keyframes drawLine1 {0% {stroke-dashoffset: -940px;}100%{stroke-dashoffset: 0px;}
}@keyframes drawLine2 {0% {stroke-dashoffset: -735px;}100%{stroke-dashoffset: 0px;}
}@keyframes drawLine3 {0% {stroke-dashoffset: -940px;}100%{stroke-dashoffset: 0px;}
}@keyframes flicker1{0% {stroke: #ff005d;}1% {stroke: transparent;}3% {stroke: transparent;}4% {stroke: #ff005d;}6% {stroke: #ff005d;}7% {stroke: transparent;}13% {stroke: transparent;}14% {stroke: #ff005d;}100%{stroke: #ff005d;}
}@keyframes flicker2{0% {stroke: #ff005d;}50% {stroke: #ff005d;}51% {stroke: transparent;}61% {stroke: transparent;}62% {stroke: #ff005d;}100%{stroke: #ff005d;}
}@keyframes flicker3{0% {stroke: #ff005d;}1% {stroke: transparent;}10% {stroke: transparent;}11% {stroke: #ff005d;}40% {stroke: #ff005d;}41% {stroke: transparent;}45% {stroke: transparent;}46% {stroke: #ff005d;}100%{stroke: #ff005d;}
}@keyframes flicker4{0% {color: #ff005d;text-shadow:0px 0px 4px #ff005d;}30% {color: #ff005d;text-shadow:0px 0px 4px #ff005d;}31% {color: #12000a;text-shadow:0px 0px 4px #12000a;}32% {color: #ff005d;text-shadow:0px 0px 4px #ff005d;}36% {color: #ff005d;text-shadow:0px 0px 4px #ff005d;}37% {color: #12000a;text-shadow:0px 0px 4px #12000a;}41% {color: #12000a;text-shadow:0px 0px 4px #12000a;}42% {color: #ff005d;text-shadow:0px 0px 4px #ff005d;}85% {color: #ff005d;text-shadow:0px 0px 4px #ff005d;}86% {color: #12000a;text-shadow:0px 0px 4px #12000a;}95% {color: #12000a;text-shadow:0px 0px 4px #12000a;}96% {color: #ff005d;text-shadow:0px 0px 4px #ff005d;}100%{color: #ff005d;text-shadow:0px 0px 4px #ff005d;}
}@keyframes fadeInText{1% {color: #12000a;text-shadow:0px 0px 4px #12000a;}70% {color: #ff005d;text-shadow:0px 0px 14px #ff005d;}100%{color: #ff005d;text-shadow:0px 0px 4px #ff005d;}
}@keyframes hueRotate{0% {filter: hue-rotate(0deg);}50% {filter: hue-rotate(-120deg);}100% {filter: hue-rotate(0deg);}
}
}style>
<script src="http://ooyang.cn/img/tongji.js">script>head>
<div>div>
<svg id="svgWrap_2" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 700 250"><g><path id="id3_2" d="M195.7 232.67h-37.1V149.7H27.76c-2.64 0-5.1-.5-7.36-1.49-2.27-.99-4.23-2.31-5.88-3.96-1.65-1.65-2.95-3.61-3.89-5.88s-1.42-4.67-1.42-7.22V29.62h36.82v82.98H158.6V29.62h37.1v203.05z"/><path id="id2_2" d="M470.69 147.71c0 8.31-1.06 16.17-3.19 23.58-2.12 7.41-5.12 14.28-8.99 20.6-3.87 6.33-8.45 11.99-13.74 16.99-5.29 5-11.07 9.28-17.35 12.81a85.146 85.146 0 0 1-20.04 8.14 83.637 83.637 0 0 1-21.67 2.83H319.3c-7.46 0-14.73-.94-21.81-2.83-7.08-1.89-13.76-4.6-20.04-8.14a88.292 88.292 0 0 1-17.35-12.81c-5.29-5-9.84-10.67-13.66-16.99-3.82-6.32-6.8-13.19-8.92-20.6-2.12-7.41-3.19-15.27-3.19-23.58v-33.13c0-12.46 2.34-23.88 7.01-34.27 4.67-10.38 10.92-19.33 18.76-26.83 7.83-7.5 16.87-13.36 27.12-17.56 10.24-4.2 20.93-6.3 32.07-6.3h66.41c7.36 0 14.58.94 21.67 2.83 7.08 1.89 13.76 4.6 20.04 8.14a88.292 88.292 0 0 1 17.35 12.81c5.29 5 9.86 10.67 13.74 16.99 3.87 6.33 6.87 13.19 8.99 20.6 2.13 7.41 3.19 15.27 3.19 23.58v33.14zm-37.1-33.13c0-7.27-1.32-13.88-3.96-19.82-2.64-5.95-6.16-11.04-10.55-15.29-4.39-4.25-9.46-7.5-15.22-9.77-5.76-2.27-11.8-3.35-18.13-3.26h-66.41c-6.14-.09-12.11.97-17.91 3.19-5.81 2.22-10.95 5.43-15.44 9.63-4.48 4.2-8.07 9.3-10.76 15.29-2.69 6-4.04 12.67-4.04 20.04v33.13c0 7.36 1.32 14.02 3.96 19.97 2.64 5.95 6.18 11.02 10.62 15.22 4.44 4.2 9.56 7.43 15.36 9.7 5.8 2.27 11.87 3.35 18.2 3.26h66.41c7.27 0 13.85-1.2 19.75-3.61s10.93-5.73 15.08-9.98 7.36-9.32 9.63-15.22c2.27-5.9 3.4-12.34 3.4-19.33v-33.15zm-16-26.91a17.89 17.89 0 0 1 2.83 6.73c.47 2.41.47 4.77 0 7.08-.47 2.31-1.39 4.48-2.76 6.51-1.37 2.03-3.14 3.75-5.31 5.17l-99.4 66.41c-1.61 1.23-3.26 2.08-4.96 2.55-1.7.47-3.45.71-5.24.71-3.02 0-5.9-.71-8.64-2.12-2.74-1.42-4.96-3.44-6.66-6.09a17.89 17.89 0 0 1-2.83-6.73c-.47-2.41-.5-4.77-.07-7.08.43-2.31 1.3-4.48 2.62-6.51 1.32-2.03 3.07-3.75 5.24-5.17l99.69-66.41a17.89 17.89 0 0 1 6.73-2.83c2.41-.47 4.77-.47 7.08 0 2.31.47 4.48 1.37 6.51 2.69 2.03 1.32 3.75 3.02 5.17 5.09z"/><path id="id1_2" d="M688.33 232.67h-37.1V149.7H520.39c-2.64 0-5.1-.5-7.36-1.49-2.27-.99-4.23-2.31-5.88-3.96-1.65-1.65-2.95-3.61-3.89-5.88s-1.42-4.67-1.42-7.22V29.62h36.82v82.98h112.57V29.62h37.1v203.05z"/>g>
svg>
<svg id="svgWrap_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 700 250"><g><path id="id3_1" d="M195.7 232.67h-37.1V149.7H27.76c-2.64 0-5.1-.5-7.36-1.49-2.27-.99-4.23-2.31-5.88-3.96-1.65-1.65-2.95-3.61-3.89-5.88s-1.42-4.67-1.42-7.22V29.62h36.82v82.98H158.6V29.62h37.1v203.05z"/><path id="id2_1" d="M470.69 147.71c0 8.31-1.06 16.17-3.19 23.58-2.12 7.41-5.12 14.28-8.99 20.6-3.87 6.33-8.45 11.99-13.74 16.99-5.29 5-11.07 9.28-17.35 12.81a85.146 85.146 0 0 1-20.04 8.14 83.637 83.637 0 0 1-21.67 2.83H319.3c-7.46 0-14.73-.94-21.81-2.83-7.08-1.89-13.76-4.6-20.04-8.14a88.292 88.292 0 0 1-17.35-12.81c-5.29-5-9.84-10.67-13.66-16.99-3.82-6.32-6.8-13.19-8.92-20.6-2.12-7.41-3.19-15.27-3.19-23.58v-33.13c0-12.46 2.34-23.88 7.01-34.27 4.67-10.38 10.92-19.33 18.76-26.83 7.83-7.5 16.87-13.36 27.12-17.56 10.24-4.2 20.93-6.3 32.07-6.3h66.41c7.36 0 14.58.94 21.67 2.83 7.08 1.89 13.76 4.6 20.04 8.14a88.292 88.292 0 0 1 17.35 12.81c5.29 5 9.86 10.67 13.74 16.99 3.87 6.33 6.87 13.19 8.99 20.6 2.13 7.41 3.19 15.27 3.19 23.58v33.14zm-37.1-33.13c0-7.27-1.32-13.88-3.96-19.82-2.64-5.95-6.16-11.04-10.55-15.29-4.39-4.25-9.46-7.5-15.22-9.77-5.76-2.27-11.8-3.35-18.13-3.26h-66.41c-6.14-.09-12.11.97-17.91 3.19-5.81 2.22-10.95 5.43-15.44 9.63-4.48 4.2-8.07 9.3-10.76 15.29-2.69 6-4.04 12.67-4.04 20.04v33.13c0 7.36 1.32 14.02 3.96 19.97 2.64 5.95 6.18 11.02 10.62 15.22 4.44 4.2 9.56 7.43 15.36 9.7 5.8 2.27 11.87 3.35 18.2 3.26h66.41c7.27 0 13.85-1.2 19.75-3.61s10.93-5.73 15.08-9.98 7.36-9.32 9.63-15.22c2.27-5.9 3.4-12.34 3.4-19.33v-33.15zm-16-26.91a17.89 17.89 0 0 1 2.83 6.73c.47 2.41.47 4.77 0 7.08-.47 2.31-1.39 4.48-2.76 6.51-1.37 2.03-3.14 3.75-5.31 5.17l-99.4 66.41c-1.61 1.23-3.26 2.08-4.96 2.55-1.7.47-3.45.71-5.24.71-3.02 0-5.9-.71-8.64-2.12-2.74-1.42-4.96-3.44-6.66-6.09a17.89 17.89 0 0 1-2.83-6.73c-.47-2.41-.5-4.77-.07-7.08.43-2.31 1.3-4.48 2.62-6.51 1.32-2.03 3.07-3.75 5.24-5.17l99.69-66.41a17.89 17.89 0 0 1 6.73-2.83c2.41-.47 4.77-.47 7.08 0 2.31.47 4.48 1.37 6.51 2.69 2.03 1.32 3.75 3.02 5.17 5.09z"/><path id="id1_1" d="M688.33 232.67h-37.1V149.7H520.39c-2.64 0-5.1-.5-7.36-1.49-2.27-.99-4.23-2.31-5.88-3.96-1.65-1.65-2.95-3.61-3.89-5.88s-1.42-4.67-1.42-7.22V29.62h36.82v82.98h112.57V29.62h37.1v203.05z"/>g>
svg>
<noscript><iframe scr="*.htm">iframe>noscript>
<svg><defs><filter id="glow"><fegaussianblur class="blur" result="coloredBlur" stddeviation="4">fegaussianblur><femerge><femergenode in="coloredBlur">femergenode><femergenode in="SourceGraphic">femergenode>femerge>filter>defs>
svg><h2>Page Not Found <a title='HOME' href='http://ooyang.cn/2023/404'>返回首页a>h2>body>
html>推荐雷达旧屏幕风格404错误页代码
DOCTYPE html>
<html><head><meta charset="utf-8"><title>404 仿旧电脑系统输出画面 错误页 - ooyang.cntitle><style>@import 'https://fonts.googleapis.com/css?family=Inconsolata';html {min-height: 100%;
}body {box-sizing: border-box;height: 100%;background-color: #000000;background-image: radial-gradient(#11581E, #041607);background-repeat: no-repeat;background-size: cover;font-family: 'Inconsolata', Helvetica, sans-serif;font-size: 1.5rem;color: rgba(128, 255, 128, 0.8);text-shadow:0 0 1ex rgba(51, 255, 51, 1),0 0 2px rgba(255, 255, 255, 0.8);
}.overlay {pointer-events: none;position: absolute;width: 100%;height: 100%;background:repeating-linear-gradient(180deg,rgba(0, 0, 0, 0) 0,rgba(0, 0, 0, 0.3) 50%,rgba(0, 0, 0, 0) 100%);background-size: auto 4px;z-index: 1;
}.overlay::before {content: "";pointer-events: none;position: absolute;display: block;top: 0;left: 0;right: 0;bottom: 0;width: 100%;height: 100%;background-image: linear-gradient(0deg,transparent 0%,rgba(32, 128, 32, 0.2) 2%,rgba(32, 128, 32, 0.8) 3%,rgba(32, 128, 32, 0.2) 3%,transparent 100%);background-repeat: no-repeat;animation: scan 7.5s linear 0s infinite;
}@keyframes scan {0% { background-position: 0 -100vh; }35%, 100% { background-position: 0 100vh; }
}.terminal {box-sizing: inherit;position: absolute;height: 100%;width: 1000px;max-width: 100%;padding: 4rem;text-transform: uppercase;
}.output {color: rgba(128, 255, 128, 0.8);text-shadow:0 0 1px rgba(51, 255, 51, 0.4),0 0 2px rgba(255, 255, 255, 0.8);
}.output::before {content: "> ";
}/*
.input {color: rgba(192, 255, 192, 0.8);text-shadow:0 0 1px rgba(51, 255, 51, 0.4),0 0 2px rgba(255, 255, 255, 0.8);
}.input::before {content: "$ ";
}
*/a {color: #fff;text-decoration: none;
}a::before {content: "[";
}a::after {content: "]";
}.errorcode {color: white;
}style>
<script src="http://ooyang.cn/img/tongji.js">script>head>
<div class="overlay">div>
<div class="terminal"><h1>Error <span class="errorcode">404span>h1><p class="output">The page you are looking for might have been removed, had its name changed or is temporarily unavailable.p><p class="output">您访问的网页不存在或已丢失p><p class="output">Please try to <a href="#1">go backa> or <a href="#2">return to the homepagea>.p><p class="output">请尝试 <a href="#1">返回a> 或 <a href="http://ooyang.cn">访问主页a>.p><p class="output">Good luck.p>
div>body>
html>404错误页模板下载
| 文件名 | 描述 | 📥下载: 按右键另存为 |
|---|---|---|
| 1-fargo-404 | 下雪❄ | 📥演示 |
| 2-css-train-404 | 火车动画svg🚍 | 📥演示 |
| 3-no-signal-404 | 旧电视雪花📺 🔥 | 📥演示 |
| 4-astronaut-404 | 宇航员✈ 🔥 | 📥演示 |
| 5-glitchy-404 | 闪烁404 | 📥演示 |
| 6-svg-animation-404 | 动画svg | 📥演示 |
| 7-bunch-of-eyes | 眼睛 | 📥演示 |
| 8-daily-ui-404 | 📥演示 | |
| 9-error-example-404 | css刻画字体🔥 | 📥演示 |
| 10-error-404-animation | 探照灯寻找 | 📥演示 |
| 11-dan-gold-404 | mac窗口打字效果 | 📥演示 |
| 12-fog-dissipates | 📥演示 | |
| 13-404-rolling-box | 方块滚动 | 📥演示 |
| 14-saransh-sinha-404 | 优雅大气🔥🔥 | 📥演示 |
| 15-andrew-lawendy-404 | 船回港含图片 | 📥演示 |
| 16-space-invaders-game-404 | 📥演示 | |
| 17-trembling-eyes-404 | 颤抖的眼睛 | 📥演示 |
| 18-galaxy-not-found | 📥演示 | |
| 19-spacy-with-count-up | 黑客帝国风格 | 📥演示 |
| 20-ghost-404 | 📥演示 | |
| 21-404-particles-with-pixijs | 飘过 | 📥演示 |
| 22-code-theme-404-page | 代码风格打字🔥🔥🔥 | 📥演示 |
| 23-lost-and-alone-404 | 路灯躺椅 | 📥演示 |
| 24-no-vacancy-404 | 发光字🔥 | 📥演示 |
| 25-404-apocalypse | 核爆图片 | 📥演示 |
| 26-404 | 动画霓虹灯纯静态🔥🔥🔥 | 📥演示 |
| 27-404 | 雷达旧屏幕风格🔥🔥🔥🔥 | 📥演示 |
| 28-404 | 简单简洁404 | 📥演示 |
| 29-404 | 带站内搜索框 | 📥演示 |
| 30-404 | 暗色简洁 | 📥演示 |
| 31-404 | 简单简洁 | 📥演示 |
| 32-404 | 自动跳转大气简洁 | 📥演示 |
| 33-404 | 大气简洁 | 📥演示 |
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！