纯CSS三道杠汉堡按钮需用.hamburger本体画中线、::before/::after画上下线，三者absolute叠放并设content:""；动画通过类名切换触发，显式声明transform-origin:center防Safari偏移，用transform代替top/left提升性能，加cursor:pointer和touch-action:manipulation确保移动端点击响应。
怎么用 ::before 和 ::after 实现三道杠动画
纯 CSS 实现汉堡按钮的核心，是把 <div class="hamburger"></div> 当成一个容器，用它的两个伪元素分别画出上、下横线，本体画中间横线。三者用 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
有些安卓机或微信内置浏览器里，点击汉堡按钮没反应，控制台也没报错。大概率是元素没被识别为可交互目标——尤其当你把按钮做成了空 <div>，又没加任何交互提示。
- 给按钮加
cursor: pointer（哪怕只是开发时验证用） - 加上
touch-action: manipulation，告诉浏览器“这是点击操作，别等双击、别做延迟滚动” - 确保父容器没设
pointer-events: none，或者z-index被盖住 - 别用
onclick写在 HTML 里，用 JS 绑定事件时，监听click和touchstart两个事件，或者直接用addEventListener('click', ...)—— 现代浏览器 click 已自动兼容 touch
用 Flex 布局居中汉堡图标时，为什么宽度忽大忽小
常见写法是把 .hamburger 放进 display: flex 容器里，用 justify-content: center 居中。但一旦加了动画，某些浏览器（特别是 iOS Safari）会因为 layout thrashing 导致按钮宽度在动画帧之间跳变。
根本原因是：伪元素宽高依赖于父容器尺寸，而父容器又受 flex 分配影响，动画过程中尺寸微调引发连锁重排。
- 给
.hamburger设固定宽高（如width: 24px; height: 18px），别让它随内容撑开 - 伪元素用
absolute定位后，用top: 50%; transform: translateY(-50%)垂直居中，而不是靠 flex 对齐整个组件 - 如果必须用 flex，把汉堡按钮包一层
<span>或<button>，并设flex-shrink: 0防止压缩
