图标变形
Morphing Icon
别名:图标变形汉堡变叉图标切换动画菜单变关闭图标过渡
这是什么
一个图标在两种状态间平滑变形，而不是替换—— 最经典是汉堡三横变关闭叉。 用同一组线条的旋转、位移与透明度组合完成， 传达"同一个控件换了状态"。
交互实验室
试一试，再决定怎么用正在加载演示…
✓ 适用场景
- 汉堡菜单 ↔ 关闭、播放 ↔ 暂停等成对状态
- 同一位置的切换型图标按钮
- 需要强调"状态变了"而空间不变
✕ 不适用场景
- 两个语义无关的图标（变形反而误导）
- 变形前后形状差异过大（中间帧生硬）
- 图标极小（小于 16px 变形细节看不清）
常见形式
汉堡变叉
Hamburger to X
中线上移淡出、上下线旋转交叉
加号变叉
Plus to X
整体旋转 45°，最简单的变形
播放变暂停
Play to pause
三角与双竖条互相变形
实现要点
transform: rotate + translatetransition 300msopacity: middle line用三条 span（或 SVG line）加 transition transform 300ms。 汉堡变叉：上线 translateY(6px) rotate(45°)，下线 translateY(-6px) rotate(-45°)， 中线 opacity 0。 aria-label 必须随状态切换； 尊重 prefers-reduced-motion 改为直接切换图形。
交给 AI
四层 Prompt 从「它是什么」一路写到「可直接执行的任务」；切到 Agent 任务层，还能叠加视觉风格与附加要求，再一键复制给你的 Coding Agent。
为项目导航按钮实现汉堡变叉图标变形。 先检查现有图标体系（SVG 或 iconfont），选择可行的实现层。 要求： - 同一组线条的 rotate/translate/opacity 过渡，300ms - aria-label 随状态切换，键盘可触发 - 图标占位尺寸不变，无布局位移 - 尊重 prefers-reduced-motion - 不引入新依赖 完成后运行现有检查，说明修改文件。 附加要求： - 支持深色模式 - 尊重 prefers-reduced-motion - 不新增依赖 - 完成后运行现有检查并列出修改文件
可直接交给 Coding Agent，可叠加风格与附加要求
相关概念
用可点击的色块触发一个明确的动作，是界面中最基础的操作入口。 通过填充、描边、幽灵等视觉层级区分主次操作，按压时有即时的下沉反馈， 繁忙时进入加载态并禁用点击，防止重复提交。
组件应用于点击或右键触发的临时操作列表浮层：平铺或分组的命令项，选中即执行并关闭。 用于收纳非高频操作（更多、设置、删除），通常以「⋯」按钮或右键唤起。
组件应用于从屏幕边缘（多为右侧或左侧）滑入、通常带遮罩的面板。比模态框轻：能承载较长内容又不离开当前页面， 关闭后原样回到上下文；移动端常以左滑导航或底部抽屉的形式出现。
组件应用于用户按下按钮、卡片等可点击元素时，元素轻微缩小（通常 0.95～0.98）， 松开后弹回。一个几十毫秒的细节，让界面"手感"立刻从网页变成实体按键。
动效相似概念