HTML怎么做复古风格_html复古怀旧风格页面实现手册
作者：袖梨
2026-07-19
真正复古的CRT效果需叠加扫描线与亚像素抖动：用repeating-linear-gradient生成2px间距、rgba(0,0,0,0.08)透明度的黑色条纹层，并配以transform: translateX(0.5px) translateY(-0.3px)和steps(1)动画，辅以backface-visibility: hidden防闪烁。
用 CSS 模拟 CRT 显示器扫描线和抖动效果
纯色背景加 font-family: "Courier New", monospace 不算复古，真正让人一眼认出“老电脑感”的是动态干扰。关键在两层叠加：一层是半透明黑色条纹（模拟扫描线），另一层是轻微位移动画（模拟电子束不稳定）。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 扫描线用
repeating-linear-gradient生成，间隔设为2px，透明度控制在rgba(0,0,0,0.08)左右，太深会发灰，太浅没存在感 - 抖动动画别用
transform: translate()直接位移——人眼对水平晃动极其敏感，应优先用transform: translateX(0.5px) translateY(-0.3px)这类亚像素偏移，配合animation-timing-function: steps(1)避免平滑过渡 - 务必加
backface-visibility: hidden，否则 Safari 下扫描线图层容易闪烁
字体与字号必须匹配年代硬件限制
1990 年代网页不是“选个等宽字体就完事”。当时主流显示分辨率是 640×480 或 800×600，Windows 3.1 默认系统字体是 MS Sans Serif，Mac 是 Chicago。直接套用现代 Courier New 会显得太“干净”。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- Windows 风格页用
font-family: "MS Sans Serif", "Tahoma", sans-serif；Mac 风格页用font-family: "Chicago", "Geneva", sans-serif - 字号统一用
12px或13px，禁用rem或视口单位——当年没有响应式概念，固定像素才是真实 - 避免抗锯齿：
-webkit-font-smoothing: none; -moz-osx-font-smoothing: grayscale;（注意：仅对 WebKit/Blink 有效，Firefox 无对应开关）
链接下划线和点击反馈要还原“超文本原始感”
现代设计里 a:hover 加个淡入背景色就算交互，但 Netscape Navigator 2.0 的链接是纯蓝色 #0000ff、带 text-decoration: underline、点击时整行文字短暂变黑——没有过渡，没有阴影，就是生硬的视觉切换。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 链接颜色严格用
color: #0000ff，访问过后用a:visited { color: #800080; }（这是 Mosaic/Netscape 的默认紫） - 取消所有
transition，包括color和text-decoration - 点击反馈靠
a:active实现：color: #000000; background-color: #c0c0c0;——灰色背景是当年高亮的唯一方式
图片加载失败时的 alt 文本要当内容用
早期网速慢，<img alt="HTML怎么做复古风格_html复古怀旧风格页面实现【手册】" > 经常加载失败。用户依赖 alt 文本理解页面结构，所以它不是辅助功能补丁，而是主信息载体。很多老站甚至故意不设 src，只靠 alt 描述内容。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 每个
<img alt="HTML怎么做复古风格_html复古怀旧风格页面实现【手册】" >必须有alt，且长度控制在 15 字以内（参考 1995 年 Lynx 文本浏览器显示宽度） - 避免 “图片：XXX”，直接写描述：“拨号音图标”、“Windows 95 开机画面”
- 如果图是装饰性的，用
alt=""，但不要省略该属性——省略会被某些老屏幕阅读器读作 “image”
最易被忽略的是色彩空间：sRGB 和 Rec.709 在 CRT 上差异不大，但现代显示器默认开启广色域，会导致复古色值（比如 #00ff00 绿）过饱和。真要还原，得在 CSS 里加 color-scheme: light dark; 并手动校准十六进制值，而不是依赖设计稿里的“看起来差不多”。
