個性404頁面HTML源碼分享

分享的 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>