个性404页面HTML源码分享-Toy模板网

这篇具有很好参考价值的文章主要介绍了个性404页面HTML源码分享。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

个性404页面HTML源码分享

分享的 HTML 与上图内容一样，需要修改的小伙伴可以自行修改内容。文章来源地址https://www.toymoban.com/news/detail-709766.html

<style><!--
@import url("https://fonts.googleapis.com/css?family=Share+Tech+Mono|Montserrat:700");
 
* {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
box-sizing: border-box;
color: inherit;
}
 
body {background-image: linear-gradient(120deg, #4f0088 0%, #000000 100%);
height: 100vh;
}
 
h1 {
font-size: 45vw;
text-align: center;
position: fixed;
width: 100vw;
z-index: 1;
color: #ffffff26;
text-shadow: 0 0 50px rgba(0, 0, 0, 0.07);
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
font-family: "Montserrat", monospace;
}
 
div {background: rgba(0, 0, 0, 0);
width: 70vw;
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
margin: 0 auto;
padding: 30px 30px 10px;
box-shadow: 0 0 150px -20px rgba(0, 0, 0, 0.5);
z-index: 3;
}
 
P {
font-family: "Share Tech Mono", monospace;
color: #f5f5f5;
margin: 0 0 20px;
font-size: 17px;
line-height: 1.2;
}
 
span {color: #f0c674;}
 
i {color: #8abeb7;}
 
div a {text-decoration: none;}
 
b {color: #81a2be;}
 
a.avatar {
position: fixed;
bottom: 15px;
right: -100px;
-webkit-animation: slide 0.5s 4.5s forwards;
animation: slide 0.5s 4.5s forwards;
display: block;
z-index: 4
}
 
a.avatar img {
border-radius: 100%;
width: 44px;
border: 2px solid white;
}
 
@-webkit-keyframes slide {
from {
right: -100px;
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
opacity: 0;
}
to {
right: 15px;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
opacity: 1;
}
}
 
@keyframes slide {
from {
right: -100px;
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
opacity: 0;
}
to {
right: 15px;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
opacity: 1;
}
}
--></style>
<h1>404</h1>
<div>
<p>&gt; <span>ERROR CODE</span>: "<em> 欢迎来到 https://www.cnblogs.com/HOMIEBlog/ 请确保正确访问网站域名 </em>"</p>
<p>&gt; <span>ERROR DESCRIPTION</span>: "<em> 拒绝访问 您没有权限在此服务器上访问此页面 </em>"</p>
<p>&gt; <span>ERROR POSSIBLY CAUSED BY</span>: [<strong> 禁止执行访问，禁止读访问，禁止写访问，需要 ssl，需要 ssl 128，拒绝 ip 地址，需要客户端证书，拒绝站点访问，用户太多，配置无效，密码更改、映射程序访问被拒绝、客户端证书被吊销、目录列表被拒绝、超出客户端访问许可证、客户端证书不受信任或无效、客户端证书已过期或尚未有效、passport 登录失败、源访问被拒绝、无限深度被拒绝、来自同一客户端 ip 的请求太多 </strong>...]</p>
<p>&gt; <span> 若长时间无法访问可联系我 </span>: [<a href="/">QQ：</a>11111*****, <a href="/"> 微信：Lin</a>*********]</p>
<p>&gt; <span> 祝您有个愉快的一天 :-)</span></p>
</div>