HTML怎么做复古风格_html复古怀旧风格页面实现手册

真正复古的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; 并手动校准十六进制值，而不是依赖设计稿里的“看起来差不多”。