HTML 演示视觉设计规范

本文档是一套纯粹的视觉/动效/交互规范,不含具体演示内容。
供 AI(Codex / Claude Code 等)套用到演示页面上。内容由使用者自行填充。
凡给出具体数值(色值/字号/时长/参数)处请严格遵守,不要自行替换。
框架:reveal.js。运行环境:Chrome,需离线可用。比例:16:9。

---

一、总体方向

暗黑底 + 网格底纹 + 发光字 + 终端/极客气质。

强度分两档,所有页面归入其一:

• 高光档(全力双色霓虹):气氛页用。封面、章节页、金句页
• 收敛档(单色青蓝柔光):内容主力用。内容页、演示页。必须耐看、正文清晰、通篇不累

设计总基调:酷但不炫,科技感但不冰冷。视觉可以有冲击力,但不能喧宾夺主、不能显得在炫技。

---

二、色彩系统

核心色值

背景底色(深紫黑):        #0a0612
背景更深(深空/页边):     #04060c  /  #04050a
网格线:                  rgba(180,160,255,.05)   线宽 1px   间距 38px

高光霓虹渐变(青→品红):   linear-gradient(110deg, #67e8f9, #e863aa)
青色主光(收敛档):        #38bdf8  /  #67e8f9
青色发光文字:            #7fd6ff   配 text-shadow: 0 0 18px rgba(56,189,248,.5)
品红辅色:                #e863aa
终端绿(可选点缀):        #5fe87a  /  #3fb950

标题文字(亮):            #f5f0ff  /  #f0eefb
正文文字(收敛档需够亮):   #d8d2e8  /  #b8aec9
正文次要/说明:           #9a8fb0  /  #8aa0b8
等宽注释灰:              #7d8590
页码/极暗装饰:           #352a45  /  #2e2840

氛围光(径向渐变叠加层)

高光档(封面/章节/金句,光感强):

radial-gradient(ellipse at 85% 15%, rgba(56,189,248,.22), transparent 45%),
radial-gradient(ellipse at 15% 90%, rgba(232,99,170,.2), transparent 45%)

收敛档(内容/演示,光感弱):

radial-gradient(ellipse at 88% 50%, rgba(56,189,248,.1), transparent 50%)

用色原则

• 双色霓虹渐变只用于高光档的标题关键词。收敛档一律单色青蓝柔光,不用双色渐变(防止通篇花、防疲劳)
• 用 CSS 变量统一管理所有色值,便于全局调整

---

三、字体与字号

字体

中文标题/正文:   "Noto Sans SC"
英文标题/大字:   "Sora"(800 粗)  或  "Space Grotesk"
等宽/终端/代码:  "JetBrains Mono"

Google Fonts 引入;离线场景需将字体文件本地化打包。

字号层级

封面主标题:      54px   / Sora 800 / letter-spacing -1.2px / line-height 1.08
章节页大数字:    120px  / Sora 800
章节页标题:      44px   / Sora 800
金句标题:        42px   / Sora 800 / line-height 1.3
内容页标题:      36px   / Sora 700 / letter-spacing -.5px
内容页正文:      16-17px / line-height 1.7-1.9
演示页标题:      28px
小标(kicker):    12-13px / JetBrains Mono / letter-spacing 2-3px / 青色
页码:            12px   / JetBrains Mono / 暗色

---

四、五类页面版式

1. 封面页(高光):左对齐。小标 kicker + 双色霓虹大标题(关键词用霓虹渐变填充) + 一句副文 + 右下角页码。
2. 章节页(高光):超大数字(120px 霓虹) + CHAPTER 类小标 + 章节标题。用于大段之间转场提神。
3. 内容页(收敛):// 前缀小标 + 标题(关键词用青色柔光) + 要点列表。每条要点 = 青色方块编号图标(30px 圆角方块,半透明青底+青边) + 加粗标题 + 浅灰说明文字。
4. 演示页(收敛):// LIVE DEMO 小标 + 标题 + 终端/浏览器窗口(见交互三)。
5. 金句页(高光):居中。大引号装饰 + 双色霓虹大字,数字/关键词放大发光。用于关键观点、制造记忆点。

图片/截图处理(强制)

• 所有截图必须加:圆角 12px + 柔投影 0 16px 40px -12px rgba(0,0,0,.6) + 窗口外壳(顶部红黄绿三圆点的浏览器/终端框)。禁止裸截图直接贴。
• 图片不要四周留白悬空:要么贴边出血,要么坐进卡片/窗口框。
• 多图并列时统一色调(可叠一层 5% 冷灰或品牌色),让它们成套。

通用细节

• 所有页 16:9
• 圆角统一:小元素 8px,卡片/窗口 11-16px
• 单边边框(border-left/top)不加圆角

---

五、动效规范(分三类,按"该不该克制"执行)

第一类 · 全局基础动效(必做,要"隐形")

• 页面转场:平滑淡入或轻微横向平移,时长 0.3-0.4s,ease。安静、快、不抢戏。
• 内容逐条入场:每页要点依次从下方 16px 升起淡入。

  @keyframes rise { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }
  时长 0.6s,逐条 animation-delay 递增 0.15s

第二类 · 关键页高光动效(挑着做,整套只用 3-5 处)

• 霓虹标题亮起(封面):从模糊到清晰再点亮发光。

  @keyframes glowup { 0%{opacity:0;filter:blur(14px)} 60%{opacity:1;filter:blur(0)}
    100%{text-shadow:0 0 30px rgba(103,232,249,.7),0 0 60px rgba(232,99,170,.4)} }
  时长 1.4s

• 数字弹性蹦出(金句):从 scale(.3) 弹性放大到 1。

  @keyframes pop { from{opacity:0;transform:scale(.3)} to{opacity:1;transform:scale(1)} }
  时长 0.7s,缓动 cubic-bezier(.2,1.4,.4,1)

第三类 · 适配内容的讲解型动效(重点做,最不像炫技)

• 终端打字仿真:命令逐行敲出、结果逐步返回(见交互三)。
• 链路点亮:多个节点依次亮起,中间用流光线条(霓虹渐变,scaleX 0→1)连接。节点间隔 0.6s,连线 0.4s。用于表现"递进/延伸/串联"类概念。
• 节点发散:从一个中心方块长出多条线(scaleX 0→1),线末端浮现图标。用于表现"一变多/扩展"类概念。

动效总原则

• 全局动效要"看不见"(只觉流畅)
• 高光动效要"少而亮"(稀少,服务于记忆点)
• 讲解动效要"替你说话"(动效本身是讲解的一部分)
• 禁止:满屏乱飞、密集微交互、为动而动。每个动效都要对应明确目的。

---

六、交互规范(让幻灯片"可操作")

交互一 · 点击文字/图标 → 显示·放大·隐藏图片

• 页面平时干净,图片藏起;点击触发文字或小标签展开,再点收起。
• 展开用 max-height + opacity 过渡 0.5s。
• 触发文字样式:color:#7fd6ff; border-bottom:1px dashed; cursor:pointer; hover 加发光 text-shadow。
• 小标签(chip)样式:半透明青底 + 青边 + 等宽字 + 圆角 8px。

交互二 · 点击 → 页面内浮起内嵌窗口(不跳走)

• 点击后当前页上浮起模态窗口(深色毛玻璃遮罩 + 居中窗口),不离开当前幻灯片。
• 窗口带浏览器外壳(红黄绿圆点 + 标题栏 + 关闭✕)。
• 窗口内可放:放大图、长截图、说明,或嵌入真实网页(iframe)。
• 关闭:点✕ / 点遮罩 / 按 ESC。
• 入场:遮罩淡入 0.3s + 窗口 scale(.92)→1。

交互三 · 点击 → 仿真运行(不是截图,是真的在跑)

• 点"▶ 运行"按钮,终端内命令逐行出现、结果逐步返回,末尾光标闪烁。
• 实现:各行初始 opacity:0,点击后按预设 delay 数组依次加显示类;首行命令可加打字机效果(width 0→Nch,steps 缓动)。
• 终端窗口外壳同交互二。

现场操作适配(重要)

• 以上交互靠点击触发。必须为每个交互额外配键盘快捷键(如空格触发仿真、数字键开对应图、ESC 关窗口),以便不依赖精确点击、或用翻页笔时也能操作。
• 交互元素做得足够大、对比明显,便于点中。

---

七、技术实现要求

• 用 reveal.js,不要纯手写翻页。启用其内置:键盘翻页、全屏、演讲者备注(speaker notes)、PDF 导出(兜底)、进度条。
• 离线可用:字体、库、图片全部本地化打包,不依赖现场网络(除非某页要现场嵌真实在线网页)。
• 每页独立 section;色值用 CSS 变量统一管理;动效以 CSS 为主,交互用原生 JS,避免重型依赖。
• 关键交互(仿真、弹窗、图片显隐)封装成可复用函数。

---

八、验收清单

视觉:

• [ ] 高光页全力双色霓虹、够抓眼;内容页收敛版、正文够亮够清晰、通篇不累
• [ ] 两档是同一套视觉语言、过渡自然
• [ ] 所有截图加了圆角+投影+窗口外壳,无裸截图
• [ ] 整体酷但不炫、科技但不冰冷

动效:

• [ ] 全局转场/逐条入场顺滑不抢戏
• [ ] 高光动效只用在 3-5 个关键点
• [ ] 讲解动效各自对应明确目的
• [ ] 无为动而动、无满屏乱飞

交互:

• [ ] 点击可显隐图片 / 可浮起并关闭内嵌窗口 / 仿真可点击逐行运行
• [ ] 每个交互都有键盘快捷键备选
• [ ] 交互元素够大好点中

技术:

• [ ] 基于 reveal.js,启用备注与 PDF 导出
• [ ] 完全离线可用
• [ ] 色值走 CSS 变量,交互函数可复用

---

遇到本规范未覆盖的细节,优先遵循三条总原则:酷但不炫、动效服务讲解、收敛档一切以"耐看清晰"为先。