原创史上最牛的 恶搞404页面，附带源码。
导读：原创史上最牛的 恶搞404页面，附带源码。先上图，这是适配Zblog的404页面，有需要的自己随便修改下！源码如下：...
原创史上最牛的 恶搞404页面，附带源码。
先上图，这是适配Zblog的404页面，有需要的自己随便修改下！
源码如下：
<html>
<plasmo-csui id="codebox-csui"></plasmo-csui>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{if isset($zbp)}{$zbp.name}-{/if}未找到[NotFound:404]</title>
<style>
:root {
--bg: #050b14;
--panel: rgba(12, 22, 40, 0.92);
--text: #e8eef7;
--muted: #b8c2d3;
--accent: #b30000;
/* 按钮配色：和面板深色背景接近，浅蓝文字区分 */
--btn-bg: rgba(30, 48, 80, 0.85);
--btn-text: #e8eef7;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
background: var(--bg);
color: var(--text);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 24px;
overflow-x: hidden;
}
/* Background layers */
.background-overlay {
position: fixed;
inset: 0;
background: linear-gradient(
180deg,
rgba(10, 18, 35, 0.95),
rgba(5, 11, 20, 0.98)
);
z-index: 0;
}
.background-texture {
position: fixed;
inset: 0;
background-image: url('https://images.unsplash.com/photo-1451187580459-43490279c0fa?auto=format&fit=crop&w=1920&q=80');
background-size: cover;
opacity: 0.08;
mix-blend-mode: overlay;
z-index: 0;
}
/* Main container */
.container {
position: relative;
z-index: 2;
width: 100%;
max-width: 980px;
background: var(--panel);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 10px;
overflow: hidden;
box-shadow: 0 30px 80px rgba(0,0,0,0.75);
animation: fadeIn 0.6s ease-out;
}
/* Header */
.banner {
background: linear-gradient(180deg, #a40000, #5e0000);
padding: 26px 16px;
text-align: center;
font-size: clamp(1.4rem, 3vw, 2.4rem);
font-weight: 800;
letter-spacing: 1px;
text-transform: uppercase;
border-bottom: 3px solid rgba(255,255,255,0.1);
}
/* Content */
.content {
padding: 48px 40px;
text-align: center;
}
.legal-text {
font-size: 1.2rem;
line-height: 1.7;
color: var(--text);
margin-bottom: 28px;
}
.agencies {
font-size: 1.15rem;
line-height: 1.6;
color: var(--muted);
font-weight: 600;
margin-bottom: 40px;
}
/* Seals */
.seal-container {
display: flex;
justify-content: center;
align-items: center;
gap: 40px;
flex-wrap: wrap;
margin-top: 20px;
}
.seal-wrapper {
width: 140px;
height: 140px;
display: flex;
align-items: center;
justify-content: center;
}
.seal-image {
width: 100%;
height: 100%;
object-fit: contain;
filter: drop-shadow(0 10px 18px rgba(0,0,0,0.6));
}
/* Footer link */
.info-link {
margin-top: 36px;
font-size: 0.95rem;
color: var(--muted);
text-align: center;
}
.info-link a {
color: #ffffff;
text-decoration: none;
border-bottom: 1px solid rgba(255,255,255,0.5);
}
.info-link a:hover {
opacity: 0.8;
}
/* 按钮组：居中布局 */
.btn-group {
display: flex;
justify-content: center;
gap: 24px;
padding: 30px 20px;
}
/* 按钮：紧凑包裹文字，极小内边距 */
.btn {
padding: 6px 14px;
background-color: var(--btn-bg);
color: var(--btn-text);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 999px;
font-size: 1.2rem;
font-family: inherit;
cursor: pointer;
text-decoration: none;
transition: all 0.2s ease;
white-space: nowrap;
}
.btn:hover {
background-color: rgba(45, 68, 105, 0.9);
border-color: rgba(255,255,255,0.2);
}
/* Animation */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
/* Mobile */
@media (max-width: 600px) {
.content {
padding: 30px 18px;
}
.seal-wrapper {
width: 110px;
height: 110px;
}
.btn-group {
flex-direction: column;
align-items: center;
gap: 14px;
}
}
</style>
<style data-id="codebox-css">.codebox-current { outline: 2px solid #42b88350 !important; }</style></head>
<body>
<div></div>
<div></div>
<main role="main" aria-label="官方公告" _mstaria-label="249184" _msthash="1">
<header _msttexthash="25731927" _msthash="2">本页面已被查封</header>
<section>
<p _msttexthash="141840725" _msthash="3">该页面已被执法部门查封，用于安全和调查目的。</p>
<p _msttexthash="145003261" _msthash="4">美国联邦调查局（FBI）<br _istranslated="1">财政信息与调查局（FIOD）</p>
<div>
<div>
<img src="https://pic1.imgdb.cn/item/6a4b6dee3f3dcc5752c3dfda.jpg" alt="美国司法部印章" _mstalt="707096" _msthash="5">
</div>
<div>
<img src="https://pic1.imgdb.cn/item/6a4b6dee3f3dcc5752c3dfd9.jpg" alt="联邦调查局印章" _mstalt="970138" _msthash="6">
</div>
</div>
<div><font _mstmutation="1" _msttexthash="27842737" _msthash="7">更多信息请访问 <a href="https://www.justice.gov" target="_blank" rel="noopener noreferrer" _mstmutation="1" _istranslated="1"> justice.gov </a></font>
</div>
</section>
<!-- 紧凑居中按钮区域 -->
<div>
<a href="javascript:history.back()">返回上一页</a>
<a href="{if isset($zbp)}{$zbp.host}{/if}">返回首页</a>
</div>
<script>
var rtime = 10;
function showtime(){
if(document.getElementById('rtime')) {
document.getElementById('rtime').innerHTML = rtime;
}
rtime = rtime-1;
if(rtime==-1){
window.location="{if isset($zbp)}{$zbp.host}{/if}";
}
}
clearInterval(settime);
var settime = setInterval(function(){
showtime();
},1000);
</script>
</main>
</body></html>Hackyh'Blog版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！