细节与特效 · 耐看的小细节
图标形变Icon morph
- 同一个东西变了
- 笔画在移动
- 不换图形
同一个图标在两个状态之间直接变形：汉堡变叉、播放变暂停、加号变减号。它不是两个图标轮流显隐 —— 中间那些笔画是真的在移动、旋转、伸缩，所以观众看到的是「同一个东西变了」，而不是「换了一个」。
什么时候用它
用在「开/关」「播放/暂停」「展开/收起」这种二态切换上，尤其是切换按钮本身。别用在两个毫不相干的图形之间 —— 那样中间过程会变成一团乱麻，反而不如交叉淡化。
参数
transform: rotate 0→45deg translateY ±7px · opacity 1→0 middle stroke · 240ms cubic-bezier(0.4, 0, 0.2, 1)
配方
图标形变 → transform: rotate 0→45deg translateY ±7px · opacity 1→0 middle stroke · 240ms cubic-bezier(0.4, 0, 0.2, 1)
给 AI 的一句话
做汉堡变叉：上下的两条线各自 rotate 到 ±45deg，同时 translateY 移到中线位置（各自 ±7px）；中间那条线 opacity 从 1 到 0 并稍微缩短。整段 240ms 用 cubic-bezier(0.4, 0, 0.2, 1)。三条线必须共用同一个时长 —— 分开写会出现「先变成一根、再慢慢合拢」的破绽。