网页风格博物馆 · WebStyleMuseum

一次点击，一个时代。一个把网页设计史做成展厅的纯 CSS 静态站点。

同一份内容（色板、字型、按钮、卡片、浏览器窗口），穿上 16 种不同时代的"皮肤"——从 1981 年孟菲斯派的第一道波浪线，到 2020 年代的新拟物与玻璃拟态。切换选项卡，整个页面连字体、配色、布局、动效一起换装。

在线体验：打开 index.html 即可（或访问 GitHub Pages，见下）。

展厅一览

No.	展厅	年代	一句话
00	大厅	—	展馆入口，十六张风格明信片
01	极简主义	2010s	瑞士网格、无衬线、一个红色惊叹号
02	玻璃拟态	2021	半透明玻璃板上的霓虹渐变
03	新拟物	2020	从背景里长出来的柔和浮雕
04	粗野主义	2000s	粗黑边框与硬阴影的诚实
05	Y2K 千禧风	1998–2003	星星、彩虹渐变字与跑马灯
06	赛博朋克 · 终端	未来时	霓虹、扫描线与故障字符
07	报纸编辑风	纸媒时代	报头、分栏、朱红标题
08	Web 2.0 时代	2005–2010	高光按钮、圆角徽章与 BETA
09	拟物写实	2012	皮革、木质、镀铬旋钮
10	Win10 扁平风	2015	磁贴、色块、无阴影的秩序
11	原始万维网	1991	CERN 的灰底、Times 与蓝色链接
12	Windows 98	1998	系统灰、立体按钮、蓝色标题栏
13	Win7 梦幻	2009	Aero 玻璃悬浮在蓝天绿草上
14	苹果 · iPod 时代	2004–2010	镜面黑、亮白大字、拉丝金属
15	学术期刊风	当代	白纸黑字、衬线正文、发丝分隔线
16	孟菲斯派	1981–1988	奶油底色上的红黄蓝绿狂欢

特性

• 16 个风格展厅 + 大厅，一键切换主题（配色 / 字体 / 布局 / 动效全部换装）
• 每厅专属入场动效（玻璃=模糊浮现、粗野=生硬砸落、Y2K=烟火弹跳…），遵循强缓动曲线、hover 门控与 prefers-reduced-motion 兜底
• 每厅五件套展品：01 色板 · 02 字型 · 03 组件（含进度条）· 04 藏品（CSS 手绘浏览器 + Web Archive 真实案例 + 档案趣闻）· 05 大事记（三条时代事件时间线，随主题换装）
• 展厅动线导航：每厅底部「上一展厅 / 下一展厅」，键盘 ← / → 切换、Esc 回大厅
• 阅读进度条：随滚动推进、随主题变色的页面进度条
• 菜单栏随主题换装；下滑自动收起、上滑恢复，不遮挡内容
• 高端质感：胶片颗粒覆盖、主题化选中色与滚动条、动态页面标题、favicon
• 大厅会客：馆藏统计（展厅/色板/大事记自动计数）+「继续参观」上次停留提示（localStorage 记忆）
• hash 深链：index.html#/cyber 直达展厅，浏览器前进/后退可用（?theme=cyber 亦兼容）
• 零依赖：纯 HTML + CSS + JS，无框架、无构建、双击即开

快速开始

# 方式一：直接双击 index.html

# 方式二：本地静态服务器
python -m http.server 8000
# 访问 http://localhost:8000

项目结构

WebStyleMuseum/
├── index.html              # 页面骨架：双层导航、大厅、通用展厅、关于对话框
├── css/
│   ├── base.css            # 共享样式：导航 / 展厅骨架 / 组件墙 / 藏品展区 / 动效 token
│   ├── minimal.css         # 每个主题一个文件（共 16 个）
│   ├── glass.css
│   └── …                   # neu / brutal / y2k / cyber / editorial / web2 / skeuo /
│                           # win10 / cern / win98 / win7 / apple / science / memphis
└── js/
    ├── themes.js           # 展厅数据（标题、色板、案例链接、档案等）
    └── main.js             # 主题切换、展厅填充、选项卡滚动、关于对话框

如何新增一座展厅

1. 新建 css/<主题>.css：主题配色变量 + 主题元素换装 + 导航适配 + 浏览器皮肤 + 专属入场动效（参考任意现有主题文件）
2. 在 js/themes.js 添加一条数据：title / year / desc / font / keywords / palette / plaque / url / caseLink / caseLabel / fact / foot
3. 在 index.html 添加一个选项卡按钮和一张大厅明信片
4. （可选）在 css/base.css 添加一个 .mini-<主题> 明信片预览
5. 用 index.html?theme=<主题> 预览，再用无头浏览器截图检查（参考 shots/）

技术栈

• 原生 HTML / CSS / JavaScript（零依赖、零构建）
• Google Fonts：Fraunces / Archivo / Noto Sans SC / Noto Serif SC / Nunito / Plus Jakarta Sans / Space Mono / Bungee / VT323
• 真实案例链接来自 Web Archive

开源协议

MIT License · © 2026 dboycht

作者

dboycht — GitHub · 项目地址：https://github.com/dboycht/WebStyleMuseum