交互

数值 / 代码

结构  <div role="group" aria-label="按状态筛选"> 里一排 <button aria-pressed>
对勾  只插进选中那一枚，真实占位；入场220ms cubic-bezier(.22,1,.36,1)
      from { opacity:0; transform:scale(.2) rotate(-30deg) }
铺底  .chip::before { transform:scaleX(0); transform-origin:left center }
      .chip[aria-pressed="true"]::before { transform:scaleX(1) }   220ms 同一条曲线
让位  点击时先量各标签位置 → 改状态 → 从旧位置 translate 滑回0（220ms）
      标签里的文字按「相对标签」的位置补位，对勾把字往右推也是滑过去的
计数  值变了才重播（首次渲染不跳）
      @keyframes bump-in { from { opacity:0; transform:translateY(-45%) scale(1.15) } }
播报  <p class="visually-hidden" aria-live="polite">显示 N 项</p>——整排只这一条
减弱  不量位置、不挂动画类，直接到位

用在哪

plan「全部任务」的状态筛选（全部／收件箱／进行中／已完成／已归档）。plan笔记页的标签筛选同样处理，但不铺底色——那一行本来是无边框文字，选中只换深色加粗，带下划线的蓝字会像超链接。本站收藏页按「类型」筛选的那排单选也是这套。

为什么

屋主给的组件原文是多选，可plan这排筛选一直是单选；改成多选就改了筛选规则，等于造新功能。所以只把对勾、铺底、让位、数字跳动套到现有的单选上。播报集中成一条：一排标签每个数都播，读屏会被刷屏。

数值 / 代码

做法与单选版相同：<button aria-pressed> 胶囊、对勾长出、FLIP 让位、#pool-count 数字跳动
差别  三排都能多选；题库那排从带全名的卡片换成短名胶囊
结果  手机上题库区从9行卡片缩成5行标签

用在哪

刷刷「专项练习」的题型、难度、混合题库三排。3.13.0做了，同一版撤回。本站收藏页的标签筛选在用：star是展台，屋主2026-10-08要求把合集的交互用遍，例外写在「只升级已有交互」那条；其他项目照旧不用。

为什么

屋主看过之后让盖回去，原话在下面（文档里转述成「屋主看过觉得不如原来，撤回」）。留下的两条结论：屋主要的是好看，不是更紧凑；以后再动这一页先出样张给屋主看，不直接落代码。

数值 / 代码

删除  文字、叉号     opacity 1→0，100ms cubic-bezier(.4,0,.2,1)
      底色层         scale(圆点宽/标签宽, 圆点高/标签高) + 淡出，170ms
      中心圆点       淡入 → 55%处最亮 → scale(.2) 淡出，240ms
      圆点走完才从 DOM 里拿掉；收尾 = finished 事件 或 兜底计时器（240 + 120ms）
补位  后面的标签和输入框 FLIP translate → 0，240ms cubic-bezier(.2,.8,.2,1)
      一个比一个晚24ms出发，最多晚96ms
高度  补位期间 box.style.minHeight = 原高度（一次性写入）
      走完一次性清掉，框直接收缩——不做高度动画
新增  opacity 0 + scale(.6) → 原样，180ms；输入框同时 FLIP 让位
联想  输入框 role="combobox" aria-autocomplete="list" aria-expanded aria-controls
      浮层 role="listbox"，选项 role="option"，不可聚焦；当前项靠 aria-activedescendant
      浮层 mousedown 一律 preventDefault()（不让输入框失焦，否则 blur 先把浮层收掉、click 落空）

input.addEventListener("keydown", (event) => {
  imeKeyDown = Boolean(event.isComposing);           // 只记旗标，不 preventDefault
  if (event.isComposing || event.keyCode === 229) return;
  // ↑↓ 移动；有当前项的回车 → preventDefault() 并插入；Esc 第一下只收浮层
});
form.addEventListener("submit", (event) => {
  event.preventDefault();
  if (imeKeyDown) return;                            // 只认 isComposing，不认229
  addTag(input.value);
});

用在哪

刷刷搜题框（3.13.0，题库标签与关键词标签）；plan笔记的标签输入（2026-09-27，替换原来逗号分隔的一行字：输入#联想当前库已有的标签，回车或中英文逗号收成一枚，删一枚立刻落库）。本站搜索框也是：输入#联想已有标签，收成的标签可删。

为什么

「缩成圆点」全程只动transform和opacity：底色单独一层，横竖各按自己的比例缩，缩出来是真的圆，不是被压扁的胶囊。高度先撑住再一次放开：一删就收缩的话，从第二行往上滑的标签有240ms画在框外，压在下面的字上。

数值 / 代码

条数   桌面6条、≤600px 5条；末尾固定一条「查看全部 N 个结果」（选它 = 点「搜索」）
游标   ↓ 从「无」到第0项；第0项按 ↑ 回到「无」；末项按 ↓ 停住
回车   有当前项 → preventDefault() 并打开它；没有当前项 → 不拦，表单照旧提交
Esc    第一下只收浮层、保留框内文字；第二下清空；再下一下收起 ≤900px 的整行搜索
零结果 「没有直接命中「xx」，名称相近的业务：」+ 最多3条，不出「查看全部」
播报   「N条联想，上下键选择」；停手约400ms后只播最后一句，同一句不重播，收起时清掉待播
更新   非合成态 input 与 compositionend 两路都接，渲染幂等；组字期间不更新
去抖   不做（单次查询不到1.5ms）
鼠标   mousedown preventDefault()；mousemove 到哪条游标就到哪条，键盘鼠标共用一个高亮
底     实色，不挂 backdrop-filter

用在哪

岗岗顶栏搜索框（「选中后以标签插入正文」那一半不做：阅读器没有正文）。刷刷搜题框另有两条：联想只用现成数据（题库名＋术语表，合计最多8条），浮层左端对齐输入框里光标的横坐标。本站搜索框的联想浮层照这几条做。

为什么

选项不可聚焦、焦点留在输入框，用户看着联想还能接着打字。播报等停手再说：每敲一个字播一次，读屏会被自己的播报打断。浮层不磨砂是量过的：换成半透明玻璃底加blur(30px)后，屋主台式机那档（2040×1019、软件渲染）整页帧间隔P95从16.7ms翻到33.4ms，超过25ms的长帧从0个涨到34–52个；有显卡的手机档一个都不多。

数值 / 代码

倾斜   触点在卡边上时最多7°，按到正中为0
       --pry = (fx - .5) × 2 × 7deg      --prx = -(fy - .5) × 2 × 7deg
缩放   .96
按下   transform .14s cubic-bezier(.2,.8,.2,1)
光团   scale(1.8) → scale(1)（.22s）、opacity 0 → .9（.14s）；位置用 left/top 一次写定，不做动画
       card 卡面是图，光团是白光叠 screen；本样例卡面是白底，改用强调色光团、opacity .3
松手   transform .7s 弹簧（阻尼比 .5，过冲约16%）
       transition: transform .7s cubic-bezier(.34,1.56,.64,1);   /* 不认 linear() 的退路 */
       transition: transform .7s linear(0,.06,.208,.4,.6,.784,.935,1.047,1.119,1.155,1.163,
         1.149,1.123,1.091,1.059,1.03,1.007,.99,.979,.974,.974,.976,.981,.986,.991,.996,1,1.002,1);
撤掉   拖出6px、pointercancel：160ms cubic-bezier(.2,.8,.2,1) 直接回位，不过冲
键盘   空格 / 回车 = 按在正中：不倾斜、只缩放；松开键复原
减弱   不倾斜不缩放，光团在触点原地淡入淡出
写法   .card { transform: rotateX(var(--prx,0deg)) rotateY(var(--pry,0deg)) scale(var(--ps,1)) }
       透视写在父元素的 perspective 上，静止时 computed transform 回到单位矩阵

用在哪

card画廊Cover Flow正中那张和查看器里的卡（本样例取这套数，撤掉按压那一档借刷刷的）。刷刷首页「练习方式」列表行是另一套数：行很宽，鼠标最大1°缩到.985、触屏最大3°缩到.97，左右倾角再按行宽压。本站总览章节目录的每一行、收藏页的卡片，按下去都朝触点倾斜。

为什么

同一个角度在长行两端的位移随行宽平方增长：1°在1138宽的行两端要晃约7px，所以宽行要压角度，卡片不用。缩放不压：等比缩放两端对称，看着是「按进去」。撤掉按压不过冲：手指按下后开始滚动，用户在滚页面，不该看到一张卡在那里弹。

数值 / 代码

刷刷  confirm(`上次的“${title}”做到第${n}/${total}题、已答${answered}题。开始新的练习会放弃它的作答，无法恢复。要继续吗？`)
plan  文本失焦或回车即落库，点选类点了就落库 → 底部「已保存 · 撤销」3秒
      撤销 = 把对象整份回滚到这次修改之前的快照；值没变就什么都不写
      删附件仍要确认：「删除附件“X”？文件会一起删掉，撤销也找不回来。」
岗岗  「清空勾选」「从常办移出」不加确认，读屏播「已清空该卡的勾选，共N项」
样例  <dialog> + showModal()：初始焦点在「取消」；Esc 走 cancel 事件 = 取消；
      close 后焦点还给「开始新的练习」；弹层实色，不挂 backdrop-filter

用在哪

刷刷所有会顶掉半截练习的入口；plan任务与笔记的详情面板；岗岗速查卡的勾选清单与常办。本站「恢复默认外观」能撤销，所以不问：点了就生效，提示条上给撤销。

为什么

确认框的用处是把代价说清楚：做到哪一题、答了几题、能不能恢复。能撤销的操作再问一句，等于每次多一步——plan原来的「有未保存的改动，放弃吗？」连同显式「保存／取消」一起删了，换成自动保存加撤销。

数值 / 代码

<div role="radiogroup" aria-label="外观">
  <button type="button" role="radio" aria-checked="true"  tabindex="0">浅</button>
  <button type="button" role="radio" aria-checked="false" tabindex="-1">深</button>
  <button type="button" role="radio" aria-checked="false" tabindex="-1"
          aria-label="自动，跟随系统：浅色">自动</button>
</div>

键盘  ←/→（↑/↓ 同）组内循环，选中跟着焦点走；Home / End 跳首尾
色点  role="group" 里六个 <button aria-pressed aria-label="蓝">；←/→、Home/End 同样能换，↑/↓ 留给页面滚动
      中文名默认压成 0 宽（不是 display:none），hover 或键盘聚焦时就地展开
选中  色点双圈 box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent)
播报  「外观已切换为深色」「强调色已切换为绿」
存储  <项目>-mode、<项目>-accent，读写一律 try/catch（file:// 下 Safari 读 localStorage 直接抛错）

用在哪

四个工具侧栏底部的外观控件；≤600px放进「更多」面板。本站侧栏底部的浅深分段、「背景模糊」分段也是这套。

为什么

单选组读屏读作「3项中的第1项，已选中」；按钮加aria-pressed读出来是三个互不相干的开关。roving tabindex让整组只占一个Tab位，组内换档用方向键。「自动」把解析结果写进可读名，读屏才答得出现在到底是深还是浅。

数值 / 代码

行      图标块32px、圆角9 + 标题 / 副标题（单行省略）+ 计数胶囊 + chevron
图标块  background-color: 分类色实底;
        background-image: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0));
        box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 2px 5px rgba(0,0,0,.12);
        里面白色线条图标18px、stroke 1.9；实心只给 play 这种本来就实心的形
chevron 三级灰 rgba(60,60,67,.32)，<path d="m9.8 6.2 5.8 5.8-5.8 5.8"/>
分隔    行间1px rgba(60,60,67,.12)，首行无线；不用边框分层

用在哪

刷刷首页「快速开始」；岗岗速查卡各节标题；card的回退列表。本站总览的章节目录也是这种列表。plan四块侧栏磁贴原来也是图标块，2026-10-08调轻成一行「彩色线条小图标＋名字＋右边数字」（只有逾期不为0时数字标红），图标块那套样式已从plan代码删掉（tools/plan/docs/BUSINESS_LOGIC.md:2030「39.1 侧栏磁贴调轻」）——首屏最抢眼的不该是磁贴，图标仍按四类上色、不用灰的。

为什么

像iOS设置那种图标块，一眼分得出类别；屋主明确说过不要灰色空方块。

数值 / 代码

.icon::before {
  content: ""; width: 20px; height: 20px;
  background: currentColor;                         /* 颜色 = 元素自己的 color */
  -webkit-mask: var(--ic-doc) center / contain no-repeat;
          mask: var(--ic-doc) center / contain no-repeat;
}
:root {
  /* 形状色无所谓，统一写 %23000；# 必须转义成 %23 */
  --ic-doc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'
    fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E…%3C/svg%3E");
}

用在哪

岗岗全部图标（不改DOM，画在伪元素上）；刷刷用本地lucide，stroke-width统一成1.9；plan用lucide React；本站全部内联SVG，侧栏导航的图标就是。

为什么

屋主2026-09-23两次纠正后定成硬规则：线条图标，不许字符、emoji、灰色空方块占位（据控制室记录，一次是侧栏图标用了灰方块，一次是左上角放了「刷」字）。mask只取形状，一份图标通吃六个强调色、浅深两档和高对比模式，不用每种主题备一份。

数值 / 代码

品牌    边长34px的圆角方块，linear-gradient(135deg, var(--accent), var(--accent-2))——和主按钮同一条
        <静态目录>/brand/brand-icon.svg → brand-icon.png（1024² 透明底白线）→ 内置 SVG
        文件居中占84%（2026-09-23由65%调大，屋主嫌小）；两个文件都没有才回落内置 SVG
favicon 整块圆角方块铺满，rx="229"（边长22.37%，iOS 应用图标比例）；线条缩到84%居中
        切强调色时读 getComputedStyle(root).getPropertyValue("--accent")，拼成 data:image/svg+xml,…
        必须 encodeURIComponent（# 会截断 data URI）；只接受 /^#[0-9a-fA-F]{3,8}$/
        深浅切换不重画（同一强调色浅深两值16px下分不出）

用在哪

四个工具；本站侧栏的品牌方块同样认brand/里的文件，并且自带一份默认brand-icon.svg（就是内置那枚，视窗四周补了留白，按84%放进去和内置等大）：探测第一次就命中，不会因为找不到文件在控制台留下报错；标签页上的favicon按当前强调色画成自带渐变底的圆角方块。本条样例里这枚示意图不跟着换。

为什么

屋主看了内置SVG说「看得难受」，要自己手绘；65%他嫌太小，改成84%（他的画稿四周本来就留了白）。白线透明图挂成favicon，压在浅色标签栏上等于隐形。

数值 / 代码

灯箱  开260ms、关200ms；一个临时「幽灵」元素（aria-hidden、pointer-events:none）
      从缩略图可见框变形到大图框，动画完就删
      每帧在 JS 里按缓动算好，关键帧之间 easing:"linear"（开20帧、关15帧，下限12）
      原图比例两头差2%以上、未加载、量出0尺寸 → 不变形，只淡入
      关闭时缩略图不「完整可见」（被吸顶栏、tab bar、裁切祖先挡住）→ 只淡出
      收尾：finish 事件 或 兜底计时器（时长 + 120ms）
气泡  出现160ms：opacity 0→1、4px 位移、scale(.92)→1，transform-origin 在箭头那端
      1400ms后挂 .is-leaving 淡出140ms再删（animationend + 兜底计时器）
      贴边：平移量写进 --bubble-shift，箭头按同一个量反向移、仍指着徽章中心
      上方放不下（视口顶、吸顶栏、裁切祖先）就翻到下方

用在哪

岗岗正文截图与速查卡胶片条的灯箱；交易码「已复制／请手动复制」气泡。本站色彩页的色值点一下复制，弹的就是这种气泡；收藏页的截图点开放大、缩回原位。

为什么

从哪来回哪去，看完关掉还在原来读到的地方。打断时直接到终态，不做「半路倒着缩回去」：状态机要多一倍，换来的只是0.26秒里的一点连贯。

数值 / 代码

尺寸  宽 min(920px × --ui-scale, 92vw)，高上限86vh；标题行与底部主按钮固定，只有正文区滚动
分栏  视口 ≥1000px 正文分两列；阶段名、材料名完整显示，允许折行，不许省略号
遮罩  约 rgba(0,0,0,.28)；点遮罩、Esc 关闭——Esc 先让正在打字的输入框失焦（失焦即存）
焦点  role="dialog" aria-modal="true"；Tab 在框内转圈；关闭后焦点还回打开它的那一行
动画  scale(.96)→1 + 淡入，240ms cubic-bezier(.32,.72,0,1)；播完再卸载
      手机整屏页从右推入，同一套时长曲线；减弱动效只留淡入淡出
两态  桌面对话框 / 手机整屏页，同一个 DOM，只靠媒体查询分

用在哪

plan任务详情与笔记详情。本站收藏卡的「详情」也用居中大对话框。

为什么

屋主在笔记本上看了右侧第三栏，说放右边不合适、也没有动画，问能不能放到更合适的地方；控制室给了三种，他回「A」（原话在下面）。第三栏的宽照1440定，2552宽上名字被截、主区空着一大片，居中对话框借整屏的宽，名字不截（被否的样子见否掉的方向「详情第三栏」）。1000px分两列的阈值是量出来的：1000／1100／1200三档对话框都是920宽，三档列宽只差6px。

数值 / 代码

<button type="button" role="switch" aria-checked="false" aria-label="夜间模式" title="关灯">
  <svg width="20" height="26" viewBox="0 0 20 26" aria-hidden="true">
    <rect x="1.75" y="1.75" width="16.5" height="22.5" rx="4" stroke-width="1.5"/>   面板：只有描边
    <rect x="6.75" y="5.4" width="6.5" height="7.2" rx="3.25"/>   拨杆：夜里 translateY(7.4px)，200ms ease-out
    <circle cx="10" cy="21.2" r="1.2"/>   指示点：夜里 hsl(24 80% 60%) 炉火橙；白天 opacity .3
  </svg>
</button>
名字    可访问名固定「夜间模式」，开没开由aria-checked读出来；title照墙上开关写「关灯」「开灯」
换主题  document.startViewTransition(翻类)；::view-transition-old/new(root) 0.5s cubic-bezier(.4,0,.2,1)
        不支持或减弱动效：瞬切
颜色    继承导航链接那套：暖灰，悬停亮成深橄榄

用在哪

小屋顶栏，全站唯一的主题入口。

为什么

颜色和线描的小屋logo说同一种话。第一版是实心填色的盒子，用的是冷色token，夹在一排暖字中间冷暖打架，2026-09-02屋主裁定不和谐。整页快照交叉淡化，比给几百个元素各写transition（「彩色烟花」）干净。

数值 / 代码

<a href="../tools/shua/" aria-label="打开刷刷">打开刷刷</a>   <!-- 同一个标签页打开：不带target、rel；href是构建时算好的相对地址 -->
<!-- 图、规格条、图标：不加 href、不加 tabIndex -->

.open { border-radius: 999px; border: 1px solid var(--tool-brand); color: var(--tool-brand);
        transition: background-color .18s ease, color .18s ease; }   /* 不位移、不放大、不换阴影档 */
.open:hover { background: var(--tool-brand-soft); }
.open:focus-visible { outline: 2px solid var(--tool-brand); outline-offset: 3px; }

用在哪

小屋工具页：展台四层（日程安排、刷刷、岗岗、card）和轨道之后小架上的两件（travel、设计合集），六件各恰好一个Tab位。本站总览的章节目录借了这条：一行一个Tab位。

为什么

不然键盘用户在同一张卡上要按两次Tab。可见文字必须被可读名包含（WCAG 2.5.3）。焦点环用身份色：中性色画的焦点环在暖纸底上看不见。把整层做成可按压等于多造一个入口，所以屋主给的「按压倾斜卡片」在这页不做。

数值 / 代码

自转  约80秒一圈；拖拽、悬停在卡上、键盘焦点在卡上时停下，放开后慢慢恢复
拖拽  按下那一点跟着指针走；俯仰限位 ±0.7弧度；松手按最后100ms的速度带惯性
悬停  只在 (hover: hover) and (pointer: fine)：那张卡沿法线浮出、放大一点
点击  按下到松开位移 ≤4px（触摸 ≤8px）才算点，进这条随笔
触摸  只认横向拖动；舞台 touch-action: pan-y pinch-zoom；第二根手指落下作废这次拖拽
键盘  焦点走透明网格里的链接；焦点落在哪张，球就把哪张转到正面，:focus-visible 时画 --ring 焦点环
首帧  在3D多半会来的那一档，网格先占位（opacity:0），球画出第一帧直接淡入600ms；1800ms没来就放出网格
提示  球上不叠任何操作提示（「拖动旋转」之类）

用在哪

小屋 /notes/globe。本站总览开头的条目星球借了这条：自转、一碰就停，拖动与点开靠位移阈值分开。

为什么

手一碰就停，才看得清要点的那张；点击和拖动靠位移阈值分开，拖完松手不会误进详情。

数值 / 代码

input.addEventListener("keydown", (event) => {
  imeKeyDown = Boolean(event.isComposing);             // 只记旗标，不 preventDefault（可能打断上屏）
  if (event.isComposing || event.keyCode === 229) return;
  // ……回车、Esc、方向键的正常处理
});
input.addEventListener("keyup", () => { imeKeyDown = false; });
input.addEventListener("blur",  () => { imeKeyDown = false; });  // 按下与抬起之间焦点被挪走
form.addEventListener("submit", (event) => {
  if (imeKeyDown) { event.preventDefault(); return; }  // 只认 isComposing，不认229
  // ……正常提交
});
// React 里判 event.nativeEvent.isComposing
// 组字中不切逗号，由 compositionend 补一次（候选词和「，」一起上屏时不会再来一次普通 input）

用在哪

岗岗搜索框与目录过滤框；plan所有回车确认的输入框（标题、材料、提醒、阶段、笔记标签、快速记录、收件箱、顶栏搜索）；刷刷搜题与按题号跳转；old首页搜索。本站搜索框同样先判。

为什么

中文选词按回车时，keydown的key照样是Enter，只认key的代码分不清选词和提交，内容会提前落库。这类bug用户感觉得到、报不上来：打字时偶尔跳走、被清空、自己提交了，只会以为是自己手快。

数值 / 代码

岗岗（由近到远，一下退一层）
  关目录抽屉
  ≤600px 的速查卡底部抽屉（关闭后焦点还给触发按钮）
  收起搜索联想浮层（保留框内文字）
  清空搜索框内文字
  收起 ≤900px 的整行搜索
plan 详情对话框
  Esc → 先 blur 正在打字的输入框（失焦即存）→ 再关；合成中的 Esc 不关面板
快捷键说明面板同步列出这条链

用在哪

岗岗全站键盘分发；plan任务与笔记详情、InlineField、顶栏铃铛菜单。上面「联想浮层」「可删除标签」两个样例里都能试。本站搜索联想和「更多」面板也是Esc一下只退一层。

为什么

一下Esc既清字又关面板，刚打的字就没了。每按一下只做一件看得见的事，用户按到哪一层停都知道发生了什么。

数值 / 代码

skip link  <a class="skip" href="#main">跳到正文</a>，首个 Tab 就能越过导航
焦点环      :focus-visible { outline: 2px solid 强调色; outline-offset: 2px }
            用 :focus-visible 不用 :focus（鼠标点击不冒焦点环）；不许 outline:none 了事；
            不许被 overflow:hidden 的祖先裁掉；小屋暖纸底上焦点环必须用品牌色
焦点归还    灯箱、抽屉、对话框打开时记下触发元素，关闭后还回去
对话框      role="dialog" aria-modal="true"；Tab 在框内转圈
装饰        光斑、3D画布、品牌图标文件（alt=""）一律 aria-hidden
播报        一条 aria-live="polite"：结果数、环节切换、外观切换；不让每个控件各播各的
清单        勾选用真 <input type="checkbox"> + <label>，不用 div 模拟
强制色      forced-colors:active 下给气泡补 CanvasText 边框

用在哪

四个工具与小屋。本站外壳也照这套：跳到正文、焦点环、侧栏与「更多」面板的焦点归还。

为什么

岗岗改版前每次交互整片innerHTML重建，焦点掉到<body>，是当时最严重的缺口：键盘用户每点一下都得从页首重新Tab。

数值 / 代码

连续刷题  默认续上；首页那一行右侧胶囊写「当前题号 / 总数」
自动看题  存 { index, signature, lastAt }
          集合相同 → 续上，提示「接着上次看到的第N题继续」
          集合变了 → 从第1题开始，提示「题目范围和上次不一样」
其余入口  会顶掉半截练习时先确认（见上面「确认」一条）
signature 条数 + 首尾题号 + 全部题号的32位哈希：定长，对增删、换序都敏感
存位置    在 saveState() 一处抄，不在每个翻页函数里抄

用在哪

刷刷的三类练习入口。本站总览的「接着看」：从上次看到的那条续上。

为什么

屋主看到「1/799」以为连续刷题坏了，查下来是换了题库、进度在旧题库里；真正静默丢进度的是另外两处入口。所以定成判据，以后加入口都照它办。

数值 / 代码

①多选筛选标签　②可删除的标签　③输入联想浮层　④拨动字号刻度　⑤按压倾斜卡片　⑥长按变录音条。④各家都没做（plan：正文编辑区有，但工具条和字号偏好都得新造，桌面上也没有「键盘顶部」；岗岗：没有字号调节，字号靠clamp()随窗口变）。

为什么

组件只是手感的参考，套到没有对应功能的地方就是造新功能：多一个入口、多一条规则、多一处要维护。对应表只是起点，每一项都要回代码核一遍。

本站例外

star自身不照这条：屋主2026-10-08要求把合集的交互在star上用遍（原话「把我stars里面所有的逻辑都狠狠的用这些设计合集的内容，纯属炫技」）。总览开头的条目星球、「本书进度」圆环是为了展示新加的，收藏页的标签筛选用的是刷刷撤回的多选版。对其他项目照旧。

数值 / 代码

导航条  .fh5co-nav-style-1 { position: absolute; z-index: 8; width: 100%; margin-top: 40px; }
        没写 top（落在页面最顶）；没写 background、box-shadow、text-shadow、backdrop-filter
        ≤768时 margin-top: 20px；滚动后不变色、不加底、不固定，跟着页面滚走
黑罩    .fh5co-cover-style-2 > .fh5co-overlay {
          position: absolute; top: 0; right: 0; bottom: 0; left: 0;
          background: rgba(0, 0, 0, .6); z-index: 4;       /* 压的是整张封面图，导航浮在它上面 */
        }
品牌字  字号25px / 字重700 / #fff，"Montserrat", Arial（网络字体从没加载过，实际画出来是 Arial）
链接    字号16px / 字重400 / rgba(255, 255, 255, .5)；margin 0 15px，padding 10px 0（≤992时 margin 0 5px）
        悬停与当前页 #fff；全站 a { transition: all .5s ease }
胶囊    background: #58ca7e; border: 2px solid #58ca7e; border-radius: 30px; padding: 2px 15px; color: #fff;
        悬停 #45c46f；字重没加粗
对比度  像素法（1440×900），逐个字形像素对它身后的真实底色（中位 / 最差5%）
        有黑罩        品牌与当前页纯白16.4 / 14.5；半透明白链接4.8–5.2 / 4.6–5.1
        去掉黑罩      半透明白链接2.8–4.0 / 2.35–3.7
        去掉黑罩、只加 text-shadow: 0 1px 2px rgba(0, 0, 0, .6)   半透明白链接4.0–4.9（中位）
        图上最亮那块光斑，有黑罩时半透明白也只有2.7
        胶囊白字对 #58ca7e   2.07:1

用在哪

老站「书生子白」首页Blog/Home.html（约2021年，页脚写着「© 2021 书生子白」），同一条导航也在Explore、Blog、ACGN三页顶上。模板是FREEHTML5.co的「Drag & Drop Cards」。右端「网站素材」一项和中、右两栏5:4的比例是2026-09-25整理老站时加的，透明做法、字、胶囊都是原版。本站总览开头借了这条：≤900时顶栏压在星野上整条透明。

为什么

图是主角：导航不占面积、不画边，整张封面从页面最顶铺满，看上去就是一张图上写了几个字。主次只靠白的深浅——品牌和当前页纯白，其余半透明白，悬停才亮起来；整条唯一的彩色是右端的绿胶囊，眼睛自然落到「回主页」上。

与液态玻璃的对照

数值 / 代码

原文    背景 backdrop-filter 模糊从0过渡到26px
        面板底 rgba(255,255,255,.42)，从0.94放大到1浮起
        12个月份格按已用比例从底部填充，每格错开4帧，cubic-bezier(.2,.7,.2,1)，1秒内完成
折算    按60Hz写死：4帧 = 4 × 16.7ms = 66.7ms
        单格时长 = 1000 − 11 × 66.7 = 266.7ms：第12格在第1000ms收完
背景层  -webkit-backdrop-filter: blur(0px) → blur(26px);   /* 前缀在前、标准在后 */
        backdrop-filter: blur(0px) → blur(26px);
        transition: backdrop-filter 1s cubic-bezier(.2,.7,.2,1)
面板    transform: scale(.94) → scale(1)，.6s 同一条曲线；opacity .3s
        深色面板底 rgba(40,42,52,.42)（本页配的：同透明度，取外壳深色玻璃的底色）
月份格  .fill { transform: scaleY(0); transform-origin: 50% 100% }
        .is-open .fill { transform: scaleY(var(--r));
          transition: transform 266.7ms cubic-bezier(.2,.7,.2,1) calc(var(--i) * 66.7ms) }
关闭    统一 .3s 收回，不带 delay、不倒放
降级    背景 rgba(20,24,36,.28)（深色 rgba(0,0,0,.5)）opacity 0 → 1，面板底 .96
        @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)))
        与 prefers-reduced-transparency: reduce 走同一套

实测代价

2026-10-08本机无头Chrome实测，打开那1秒的整页rAF帧间隔，四种做法交替各跑3次合并（每种约177个间隔）；另一遍开tracing量合成器每帧画多久（viz Display::DrawAndSwap）。判据只看和基线的相对差。

同一档在负载更高时又量了一遍：合成器每帧中位原样8.9、固定模糊10.5、降级5.3、基线1.7ms，排序不变。417×750@3.5走GPU：四种做法帧间隔都是16.7／16.8、长帧0，合成器每帧0.1–0.2ms，分不出差别。

读法：这台Mac的CPU快，软件合成下四种都没掉帧；看得出的是相对代价——打开那1秒，模糊让合成器每帧的活多出约3–5倍。屋主台式机CPU慢得多，又是WARP软件渲染，同样的倍数落在16.7ms的预算上就可能掉帧（推断，没在那台机器上量）。无头Chrome每帧整屏重画，比有窗口时悲观，数字只当相对代价看。「模糊固定、只淡入」并不省：淡入期间每一帧仍按满26px重算整块模糊，比半径从0涨上去还贵一点。

推荐：要降级就直接不模糊——背景改压暗淡入、面板底提到.96（上面「降级做法」开关就是这一套，和做不出磨砂、用户要求减少透明度时同一个样子），代价接近基线，丢掉的是磨砂的景深。什么条件下降级是屋主／控制室的设计决策，可选：一律不降级；判出是软件合成就降级（WebGL failIfMajorPerformanceCaveat建不起来、或渲染器名是SwiftShader／WARP，代价是探测一次、显卡被禁用的快机器也会被降）；第一次打开时量帧、掉帧了以后再降（第一次照样卡）；一律降级（谁都看不到磨砂）。

用在哪

哪儿都不用（控制室2026-10-08定）。它要的是「按月份看的一年用量」，六个项目都没有；它的招牌又是整页背景模糊，正是屋主没显卡那台台式机的瓶颈（上面实测）。

• 刷刷：学习统计只有「按周回看」「累计统计」两个页签，按月看一年等于新造统计视图。
• 岗岗：业务手册没有时间维度。card：没有用量。
• plan：任务详情已经是「遮罩压暗＋对话框从.96放大到1」，浮起那一半现成，缺的正是背景模糊；回顾页只看一周，统计图表明写不做。
• travel：一趟旅行1–60天，没有按月的东西；弹窗遮罩已经是blur(5px)。
• 小屋：规格写明不存在弹窗和数据看板。

star自身是例外（见「只升级已有交互」）：「更多」面板的遮罩用这一条；外观里的「背景模糊」分段（自动／开／关）就是这条的降级档。

为什么好看

背景糊开和面板浮起同时发生，视线的焦点从「背景」移到「面板」，不用压暗也分得清前后。12格错开4帧，用量高低变成从左往右的一道波，比12格同时长出来更容易一格一格看清；曲线前快后慢，第一眼就看到大致高度，后段只是落定。

数值 / 代码

原文    底部面板 cubic-bezier(.2,.7,.2,1)，0.5秒从屏幕外升到位；背景压暗到40%
        落定后圆环 stroke-dashoffset 用同一条曲线1.2秒画到剩余比例，中心数字同步从0滚到目标值
面板    transform: translateY(105%) → translateY(0)，.5s
遮罩    background: #000; opacity: 0 → .4，.5s
圆环    <circle pathLength="100">  stroke-dasharray: 100 100
        stroke-dashoffset: 100 → 35（剩26 / 共40 = .65）
        transition: stroke-dashoffset 1.2s cubic-bezier(.2,.7,.2,1) .5s   /* delay .5s = 面板落定 */
数字    不另起时钟，每帧读圆环那条过渡自己的 currentTime：
        const t = getTiming();  p = (anim.currentTime − t.delay) / t.duration
        num.textContent = Math.round(26 × bezier(.2,.7,.2,1)(p))
        anim.finished 之后再写一次终值；不用 setInterval

用在哪

只借圆环那一半；「底部面板升起、背景压暗」只在本来就是底部面板的地方有意义。

• 刷刷 · 结算页分数圈　已落地（3.14.0，offline 63c902c）　renderSummary()里的.summary-score：原来是154px的圆、12px满圈实边，永远是满的，不表达分数；现在按得分画出一段弧、中心分数从0滚上来（1.2秒，数字每帧读弧那段动画的进度），页面不增元素；做完每一轮都落到这页，屋主天天看。同一轮把结算页这块长面板的blur(24px)去掉（错题多时很长，刷刷自己的规矩是长面板不加磨砂）。首页「今日目标」环不跟着改：首页每次回来整页重绘，环每次重画是噪音。
• 岗岗 · 速查卡「材料已备齐」小圆环　已落地（岗岗4eb7ac5）　renderAside()里的.qc-docs，原来是一行等宽字「已备齐3/7」；现在它和正文勾选卡卡头都是小圆环（卡头28、速查卡44，都乘--u），勾选时从当前位置画到新值。下发时说的第三处要点条已随右栏在v1.8.0取消，没有了。速查卡在阅读工具抽屉里，形态现成。小SVG允许用stroke-dashoffset，前提是A/B测帧率过关（岗岗按这条在屋主台式机那一档测过）。
• travel · 「行程与导出」里的旅行费用：可以做，没下发。「已填写¥X／预算¥Y」＋原生进度条＋余量一行，全部项目里最直白的「剩余多少」。超预算要满圈转红、不能画过一圈；「未填费用不计入」那行字要留；没设预算不出环。
• plan · 汇总卡：不改圆环。今日页「今天要做」和全部任务页「进行中」是同一个SummaryCard，数和比例都对口，但屋主2026-10-08看样张后定了「一个大数字＋一条进度」，照这个留着，也不出二选一样张；plan的数字首次渲染不跳，和「中心数字从0滚上去」正相反。
• card：十三张都已收藏，没有「剩余」。小屋：规格禁数据看板。
• 本站 · 总览「本书进度」　点开弹出这个圆环，数的是写完的章节；整个面板都借了，是star的例外（见「只升级已有交互」）。

为什么好看

两个动作排队：面板先落定、眼睛跟到位置，圆环才开始画，注意力不被同时抢走。圆环和数字同一条曲线、同一个起点，数字读到几，圆环就画到几分之几，不会出现数字先到、环还在走。底部面板只占下半屏，背景压暗就分得清层次，用不着模糊。

数值 / 代码

原文    面板从下方滑入后，53根周刻度从左到右逐根变深，每根错开1帧，走到今天这一格换成强调色并停住
        点「显示」，被遮住的编号在原地逐字展开，行高不变
折算    按60Hz写死：1帧 = 16.7ms；示例「今天」= 第41周
        → 前40根变深，第41根换强调色，后12根不动；41根走完约 .5s + 40 × 16.7ms + .24s ≈ 1.41s
面板    同上一条：translateY(105%) → 0，.5s cubic-bezier(.2,.7,.2,1)
刻度    .tick { opacity: .16 } → 走过的 .78
        transition: opacity .24s cubic-bezier(.2,.7,.2,1) calc(.5s + var(--i) * 16.7ms)
        今天那根另叠一层强调色：opacity 0 → 1，同一个 delay
编号    每个字一个槽：display: inline-block; width: .62em; height: 1.5em（等宽字体，先占好最终宽高）
        遮住时是「•」；展开时「•」上移淡出、数字从下方淡入：每字 .2s，错开50ms（3帧，本页定的）
读屏    遮住时只读「编号已隐藏」；最后一个字落定后 aria-live 播一次「编号0000 1234 5678」

用在哪

没有对口的落点。它要的是「一年按周的进度」和「要遮住再出示的编号」，六个项目都对不上。

• 刷刷：「按周回看」是一周一屏8格、左右翻周，没有一年53周的视图，也没有要遮住的编号；做就是新造年视图。
• plan · 回顾页页头「本周 · 2026年第39周」形似：能换成53根刻度走到本周停住，但刻度只说「一年过了多少」，要说做了多少就成了明写不做的统计图表。价值低。
• travel · 出门看行程标「接下来 · 第i站」形似：一天就几站，高亮那一站已经够用。
• 岗岗：办理指引只有四个环节，四根刻度就是现在的步骤条；交易码是柜员自己输系统用的，没有遮住的理由。card：十三张卡全摆在Cover Flow上，用不着刻度。小屋：不对口。
• 「遮住编号、逐字展开」唯一用得上的是travel的订单编号，并进「原地翻面」那条，而且出示时多一步，不建议放。

star自身是例外（见「只升级已有交互」）：总览的「更新记录」点开弹出53周刻度尺。

为什么好看

一年53周一字排开，走过的变深、今天那根用强调色停住，「过去多少、还剩多少」不用读数字就看得出。每根只差1帧，41根约0.7秒扫完，快到像一道光扫过去，又慢到看得出是从左往右走。编号在原地露出来，宽度和行高事先占好，面板不跳，眼睛不用重新找位置。

数值 / 代码

原文    上半部照片按原比例从1.08缩回1、铺满，暗角托住白色大字
        抽屉 margin-top: -22px 压住照片底边，从下方推入，随后进度条从0涨到剩余比例
照片    background-size: 150% auto（按原比例铺满，只取上部）
        transform: scale(1.08) → scale(1)，.8s cubic-bezier(.2,.7,.2,1)
暗角    radial-gradient 四周压到 rgba(0,0,0,.42) + 底部 linear-gradient .62 → 0；白字放在左下最暗处
抽屉    margin-top: -22px（360宽的舞台上；舞台按容器缩放时同比例）
        transform: translateY(100%) → 0，.55s，delay .12s
进度条  transform: scaleX(0) → scaleX(calc(9 / 14))，.8s，delay .6s（抽屉到位之后）
曲线    原文只写了照片和抽屉的动作，没写曲线；沿用 cubic-bezier(.2,.7,.2,1)
兜底    照片框自己的底色是一道渐变，图加载不到时露出来

用在哪

没有对口的落点。它要的是「有一张主图的详情，外加一个剩余比例」。

• travel · 照片与日记：日记卡有照片、标题、时间、正文，主图有了，但只有列表卡、没有点开的详情；照片抽屉是「打开详情」的动画，要先造详情视图，算新功能。订单里的票券截图是文字截图，裁切压字会挡信息。
• card · 查看器：是独立页面不是弹窗，「05／13」是第几张、不是进度；把画放大裁切再压白字，和「整张卡要看全」相冲突。
• 小屋 · 随笔：配图在正文末尾，正文才是主角；照片铺满、白字压暗角是苹果风的做法，小屋用暖纸。
• 岗岗：截图是系统界面、含客户信息，不能当主图、不能裁切压字。刷刷、plan：没有图。

star自身是例外（见「只升级已有交互」）：收藏卡的「详情」是居中大对话框加这个照片抽屉。

为什么好看

照片从1.08缩回1，像镜头往后退一步把景收进来，这就是「打开」的动作。抽屉压住照片底边22px，上下两块像叠在一起的两张纸，不像拼起来的两个框。暗角从四周和底部压暗，白字放在最暗的一角，换一张照片也读得清。进度条最后才涨，视线顺序是图、标题、数字。

数值 / 代码

原文    perspective 1200px，绕Y轴翻180度，cubic-bezier(.3,.7,.2,1)，0.8秒
        翻到90度时切换正反面；背面显示出示用的编号和完整信息，再点一次沿原路翻回
场景    .scene { perspective: 1200px }（360宽的舞台上；舞台按容器缩放时同比例）
卡片    .card { transform-style: preserve-3d; transform: rotateY(0deg);
                transition: transform .8s cubic-bezier(.3,.7,.2,1) }
        .is-flipped .card { transform: rotateY(180deg) }   /* 再点去掉类名 = 原路翻回 */
两面    .face { backface-visibility: hidden }   .back { transform: rotateY(180deg) }
换面    看得见的：backface-visibility 在过90度那一帧自动换
        读屏这边：每帧读 computed transform 的角度，过了90度就把看不见的一面设 aria-hidden + inert
90度在哪一刻  这条曲线 y = .5（x ≈ .188）→ 0.8s × .188 ≈ 150ms（前快后慢，不是0.4秒）
减弱动效  不转，两面原地淡入淡出（data-rm="fade"）

用在哪

• travel · 订单卡翻面出示编号　已落地（travel 5bf5497）　「我的随身旅行本」里的订单卡（BookingCard）：原来「编号：…」是一行小字，票券截图在卡底；现在点卡片或「出示编号」原地翻面，背面是放大的订单 / 确认编号连同票券截图，没有编号也没有截图的订单不给翻。全部项目里只有这里有「到前台、检票口要出示」的编号（字段confirmation，校验名「订单编号」）。数值照这一条：perspective 1200px、0.8秒、cubic-bezier(.3,.7,.2,1)，90度换面。翻面只动rotate，出示多在手机上，不压没显卡的台式机。两面高度不同：同一时间DOM里只有一面，卡高跟着正在显示的那一面走。
• card：已经有，而且更好。查看器有「翻看背面」按钮和F键，three里整张卡转180°，CSS翻面只会是降级。
• 刷刷：题卡翻面看答案看似对口，但解析要和题干一起看，翻过去题干就没了；题卡已有滑动切题的transform，会打架。
• 岗岗：交易码给柜员自己输，不给别人看。plan、小屋：没有要出示的编号。
• 本站 · 收藏的翻面卡　skill、项目、提示词这几类收藏：正面一句话说它是什么，翻过来看效果截图。

为什么好看

翻面让人知道背面的编号和正面是同一张卡，不是另一个东西。透视1200px够远，翻的时候梯形变形不夸张。曲线前快后慢，不到五分之一的时间就翻过90度，剩下的时间慢慢落定，看起来是被「甩」过去再稳住。

数值 / 代码

原文    面板从底部弹入落定，下沿留一截把手和一条虚线
        向下拖动把手时，下半张沿虚线分离，跟手下移并带2度摆动，超过40%松手就展开露出完整信息，不到就弹回
弹入    transform: translateY(560px) → 0，.6s cubic-bezier(.3,1.35,.5,1)（轻微过冲，原文没给曲线，本页定的）
拖动    pointerdown + setPointerCapture；拖动中 transition: none，每次 pointermove 直接写
        transform: translateY(y) rotate(r)
        p = y / 124（能拉开的距离，360宽的舞台上）
        r = clamp(2 × sin(min(p, 1) × π) + dx × .04, −2, 2) 度   /* 先歪后正，左右拖再加一点 */
松手    p > .4 → 展开：.45s cubic-bezier(.2,.7,.2,1)
        p ≤ .4 → 弹回：.5s cubic-bezier(.3,1.35,.5,1)，转角一起回0，带一点过冲
键盘    把手是 <button>：↓／空格／回车展开，↑／Esc收回；另有「展开完整信息」按钮（aria-expanded）
手机    把手 touch-action: none，拖动不会变成滚页面

用在哪

没有对口的落点。它要的是票据式的「存根＋完整信息」。

• travel · 订单卡形似：存根是类别、名称、时间，拉开是编号、备注、截图。但卡在可滚动的弹窗里，往下拖和滚动抢同一个手势，电脑上还得用鼠标拖。和「原地翻面」二选一，选翻面（点的更稳），两个不叠在同一张卡上。
• 刷刷 · 结算页错题回顾每道是<details>，点开看解析：改成拖开会和滚动打架，错题又常是一长串。岗岗 · 勾选卡的「原文」折叠（.check-source）同理，点开比拖开好。
• plan、card、小屋：没有票据形态。

star自身是例外（见「只升级已有交互」）：页面里过长的代码块先收起一截，照这一条下拉展开。

为什么好看

把「看完整信息」做成撕开一张票：虚线告诉人哪里能分开，下半张跟着手走、带一点摆，像真的纸。过线才展开、不到就弹回，松手那一刻结果是确定的，不会停在半路。