汉堡图标变形动画纯CSS实现，依赖transform和transition控制三条横线各自旋转、位移与隐藏：顶部线rotate(0)→rotate(45deg)+translateY(6px)，中间线opacity1→0，底部线rotate(0)→rotate(-45deg)+translateY(-6px)，需独立span或伪元素、显式transform-origin:center、checkbox状态驱动，避免重排以保性能。
汉堡图标变形动画依赖 transform 和 transition 的组合
纯 CSS 实现汉堡变叉（×）或箭头，核心不是靠多 DOM 元素切换，而是用 transform 控制三条横线的旋转、位移和缩放。必须确保三条线是同一父容器内的独立 <span> 或伪元素，否则动画会错位。
常见错误是直接对整个按钮加 transform，结果三条线一起转，失去“各自变形”的效果。正确做法是对每条线单独设置 transition，且起始/结束状态的 transform 值要精确匹配：
- 顶部线：从
rotate(0)→rotate(45deg)，同时translateY(6px) - 中间线：从
opacity: 1→opacity: 0（视觉隐藏），避免缩放导致锯齿 - 底部线：从
rotate(0)→rotate(-45deg)，同时translateY(-6px)
必须用 checkbox 或 :checked 模拟点击状态切换
CSS 无法监听真实 click 事件，所以得靠 <input type="checkbox"> 隐藏后，用相邻兄弟选择器（~）或通用兄弟选择器（+）控制菜单和图标状态。JS 只需 toggle checkbox 的 checked 属性，其余全由 CSS 驱动。
容易踩的坑：
立即学习“前端免费学习笔记（深入）”；
- 没给
<input>加id，导致<label for="xxx">失效，点不到 - 用
:focus替代:checked，键盘操作后焦点丢失，动画回退 - 移动端 Safari 对
label点击区域太小，没加touch-action: manipulation导致延迟响应
三条横线的布局必须用 flex 或绝对定位对齐
用 display: flex; flex-direction: column; justify-content: space-between; 最稳妥。如果用绝对定位，每条线的 top 值必须基于父容器高度计算，否则在不同字号下错位。
关键参数差异：
- 线高推荐用
2px，太粗（如3px）旋转后边缘模糊，太细（1px）在 Retina 屏上发虚 - 线间距建议设为
6px，刚好匹配translateY(±6px)的位移量，变形时严丝合缝 - 父容器高度固定（如
24px），否则 flex 子项的space-between会随内容撑开，破坏动画基准
动画卡顿？检查 will-change 和 transform-origin
三条线默认以左上角为旋转原点，但变形动画需要绕中心转。必须显式设置 transform-origin: center;，否则旋转偏移。
性能问题常出现在 iOS Safari：即使加了 transform: translateZ(0)，仍可能掉帧。更可靠的做法是：
- 给每条线加
will-change: transform;（仅动画期间，别全局写） - 避免同时 animating
width/height—— 这触发重排，只 animatingtransform和opacity - 用
prefers-reduced-motion媒体查询降级：当用户开启“减少运动”时，直接跳变，不执行动画
真正难调的是不同设备上 transform 的亚像素渲染差异，尤其是 Android Chrome 的 0.5px 偏移。最终上线前，务必在真机上反复点按验证三条线是否始终居中、无抖动。
