在當今的 Web 開發中，一個精心設計的 404 頁面不僅能夠體現開發者的匠心獨運，也能為使用者帶來更加愉悅的瀏覽體驗，從而提升對網站的整體印象。
上周，程式碼小抄平台新增了一項實用功能 — 支持 HTML 效果的線上預覽。
今天，借此機會向大家展示一位小夥伴在程式碼小抄分享的極具創意和視覺沖擊力的 404 頁面。
GIF 動圖預覽效果如下：
這個炫酷 404 頁面的程式碼構成主要由 CSS + HTML，由於完整程式碼太長，我這裏僅展示下炫酷 404 頁面的 HTML 部份的程式碼：
<!DOCTYPE html>
<htmllang="zh-CN">
<head>
<!--css樣式請存取程式碼小抄-->
</head>
<body>
<div class="rail">
<div class="stamp four">4</div>
<div class="stamp zero">0</div>
<div class="stamp four">4</div>
<div class="stamp zero">0</div>
<div class="stamp four">4</div>
<div class="stamp zero">0</div>
<div class="stamp four">4</div>
<div class="stamp zero">0</div>
<div class="stamp four">4</div>
<div class="stamp zero">0</div>
<div class="stamp four">4</div>
<div class="stamp zero">0</div>
<div class="stamp four">4</div>
<div class="stamp zero">0</div>
<div class="stamp four">4</div>
<div class="stamp zero">0</div>
<div class="stamp four">4</div>
<div class="stamp zero">0</div>
<div class="stamp four">4</div>
<div class="stamp zero">0</div>
</div>
<div class="world">
<div class="forward">
<div class="box">
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
</div>
</div>
</div>
</body>
<!--完整程式碼請存取程式碼小抄 -->
</html>
完整程式碼可在下方小程式中檢視，更適合在電腦上進行體驗哦。若您正在使用電腦閱讀本文，可復制下方連結到瀏覽器或點選文末的「閱讀原文」即可快速體驗炫酷 404 頁面。
線上存取：https://www.codecopy.cn/post/x5kn0g
具體線上預覽方式，可參考下方圖片中的紅色框框。
在程式碼小抄可以看到更多優質程式碼，也歡迎大家積極分享，可能會獲得我們官方的小禮品 🎁~
往期推薦
