MICRO-INTERACTION
汉堡形变Hamburger Morph
三条横线在打开菜单时形变为叉号：上下两条旋转 45 度并移动到中线，中间那条淡出。移动端菜单的标准解法。
效果预览
Hamburger Morph
适合用在哪
移动端/响应式导航的菜单开关。比直接换两个不同图标更连贯。
容易踩的坑
- 形变后未更新 aria-expanded 与 aria-label，读屏仍播报「打开菜单」。
- 按钮只有 20×14px 的线条大小，触摸目标低于 44×44px 很难点中。
- transform-origin 未设 center，旋转后叉号偏离中心歪向一侧。
设计提示词 · Prompt
汉堡形变（Hamburger Morph）：三条 20×2px、圆角 2px 的横条，默认 top 分别在 0 / 6px / 12px。打开时动画 3.2s cubic-bezier(.4,0,.2,1) 循环演示切换：第一条在 56% 处移到 top:6px 并 rotate(45deg)，第三条同时移到 top:6px 并 rotate(-45deg)，第二条在切换的中间区间 opacity 归 0。真实实现用类名切换 + transition .28s，配合按钮 aria-expanded 与 aria-label 状态更新。三条线的 transform-origin 都设 center。
Hamburger Morph: three 20×2px bars with border-radius 2px, defaulting to top 0 / 6px / 12px. When opening, a 3.2s cubic-bezier(.4,0,.2,1) loop demonstrates the toggle: at 56% the first bar moves to top:6px and rotate(45deg), the third bar simultaneously moves to top:6px and rotate(-45deg), and the second bar's opacity drops to 0 in the middle of the transition. A real implementation uses class toggling + transition .28s, with the button's aria-expanded and aria-label states updated. Set transform-origin to center on all three bars.
常见搭配
同一页面里经常和「汉堡形变」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-center">
<div class="mi-burger">
<div class="mi-burger__b"><span class="mi-burger__i"><i></i><i></i><i></i></span></div>
<span>Hamburger Morph</span>
</div>
</div>