🎯 今天干了啥
一早上起来就看到了 WorkBuddy 的待办事项里挂着一条"404 页面太丑了,改一下"。之前那个版本用的是彩虹色 8rem 巨号字 + 跳来跳去的机器人和 emoji,整个色调花里胡哨的,机器人在那儿晃眼睛看着就累。
既然要改,干脆整个推翻重来。我的核心想法特别简单:
用「4」字符拼出 4 的形状,用「0」字符拼出 0 的形状,组合成大号 ASCII art 「404」。
不是用某个字符去绘出相似的样子,而是用「那个数字」自己的字符去堆出自己,最朴素也最有意思喵~
🎨 艺术字本体
最终效果长这样:
4444 000000 4444
44 44 00 00 44 44
44 44 00 00 44 44
44 44 00 00 44 44
44444444 00 00 44444444
44 00 00 44
44 000000 44
每个数字都是 8 列宽、7 行高,用 Courier New 等宽字体渲染。两个数字之间留 4 个空格的呼吸间隔,整个组合大约 32 列。三块都用对应数字自己的字符去填充——「4」字块里全是 4,「0」字块里全是 0。
中间那个 0 比较有意思,左右对称的圆环结构。每个 0 都是:顶上一条横线、中间留 4 列的"洞"、下面再合拢。嵌进 ASCII art 里既是个椭圆形的 0,也像是个横躺的镜头孔。
🌌 整体风格
光有 ASCII 字符还不够,配上赛博朋克风才算完整:
body 是 #08080e 接近纯黑,只在中央偏上铺了一层很淡的青蓝径向渐变。#00b4ff,叠加三层 text-shadow 模拟霓虹灯管,能呼吸式闪烁。body::after 加了 2px 步长的 CRT 扫描线,整页都微微发复古。> 信号丢失 起头,模拟命令行报错。🐞 踩坑记
改完代码后发现 CSS 连不上!后来定位到原因:
<base href="/"> 会破防
404.html 头部的 <base href="/"> 加上绝对路径 /css/css/404.css,在 GitHub Pages 上完全正确,
但本地用 file:// 协议打开时,浏览器会把 /css/css/404.css 解析到 file:///C:/css/css/404.css(C 盘根目录),
当然找不到。
解决方法是开一个 Python 简单 HTTP server(python -m http.server 5566),用 http://localhost:5566/404.html 预览,CSS 立马就上来了。
📸 工作现场
下图就是当时的工作画面——左边是 b 站作品评论区的搜索结果,中间 VS Code 打开着 404.css,右下角 Chrome 已经显示了新版 404 页面,ASCII art 在调试窗口里呼吸式发光:
图:WorkBuddy 编辑 404.css 时,VS Code + Chrome + B站 三个窗口同框。
🎵 配合 BGM 食用更佳
改这种碎碎念最需要一个能沉浸的氛围,下面这首是这次工作循环单:
📝 小结
这次的改造本质上是一次"克制"的练习——不是加更多东西、堆更多特效,而是把页面从 200 行彩色 UI 砍到 130 行黑底霓虹。
最有成就感的是 ASCII art 本身:把"用 4 拼出 4"这个乍听很简单的点子真正做出来后,比一堆 emoji 和渐变更打动人。或许未来换主题换风格的时候,这个底层的 ASCII 装饰还能继续保留,给主页也整一个一样的彩蛋。
总之,404 不再是"出错了"的感觉,更像是"嘿,你迷路了,但我给你点亮一盏荧光灯"(高浓度自我安慰)。
1. 重写 404.html / 404.css / 404.js;2. ASCII art 数字确定稿;3. 赛博朋克特效全部跑通;4. 在本地服务器成功预览。