响应式汉堡菜单与三道杠动画实现方法

本文深入解析了如何用纯CSS实现稳定、高性能且跨平台兼容的响应式汉堡菜单与三道杠→叉号动画，重点攻克了伪元素布局（.hamburger本体+::before/::after绘制三线）、transform动画优化（显式声明transform-origin: center防Safari偏移、优先使用transform替代top/left避免重排）、移动端交互适配（touch-action: manipulation与cursor: pointer缺一不可）以及Flex居中引发的尺寸抖动等实战痛点，帮你告别“能转但歪、能点但卡、能做但不稳”的常见陷阱，真正实现一次编写、全端可靠运行。

怎么用 ::before 和 ::after 实现三道杠动画

纯 CSS 实现汉堡按钮的核心，是把

当成一个容器，用它的两个伪元素分别画出上、下横线，本体画中间横线。三者用 position: absolute 叠在一起，再统一控制 transform 动画。

关键不是“画三根线”，而是让它们在点击后能各自旋转、位移、合并——比如上横线顺时针转 45°、下横线逆时针转 45°、中横线透明消失，这样就能自然变成叉号。

• ::before 和 ::after 必须设 content: ""，否则不渲染
• 三个元素（本体 + 两个伪元素）的 width、height、background-color 要一致，否则视觉错位
• 动画触发必须依赖类名切换（如 .is-active），不能靠 hover —— 移动端没 hover
• 别用 transition: all，它会让未声明的属性也参与过渡，导致意外抖动；明确写 transition: transform 0.3s ease, opacity 0.3s ease

为什么 transform: rotate() 在 Safari 上可能偏移

旧版 Safari（iOS 12–13）对 transform-origin 的默认行为和 Chrome 不一致：它会以元素左上角为原点旋转，而不是中心点。结果就是三道杠转完之后位置飘了，叉号歪在一边。

这不是 bug，是规范实现差异。解决办法很简单：所有参与旋转的元素都显式声明 transform-origin: center。

• 只加在 .hamburger 上不够，::before 和 ::after 也要单独加
• 如果用了 translateY() 配合旋转，记得 transform-origin 要在 translate 之前生效，所以顺序写成 transform: translateX(...) rotate(...) 没问题，但别写反
• 不用 top/left 做位移，改用 transform: translateY()，性能更好，且避免触发重排

移动端点击无响应？检查 touch-action 和 cursor

有些安卓机或微信内置浏览器里，点击汉堡按钮没反应，控制台也没报错。大概率是元素没被识别为可交互目标——尤其当你把按钮做成了空