纯CSS三道杠汉堡按钮需用.hamburger本体画中线、::before/::after画上下线，三者absolute叠放并设content:""；动画通过类名切换触发，显式声明transform-origin:center防Safari偏移，用transform代替top/left提升性能，加cursor:pointer和touch-action:manipulation确保移动端点击响应。
怎么用
和
实现三道杠动画
纯 CSS 实现汉堡按钮的核心，是把
当成一个容器，用它的两个
伪元素
分别画出上、下横线，本体画中间横线。三者用
叠在一起，再统一控制 transform 动画。
关键不是“画三根线”，而是让它们在点击后能各自旋转、位移、合并——比如上横线顺时针转 45°、下横线逆时针转 45°、中横线透明消失，这样就能自然变成叉号。
和
必须设
，否则不渲染
三个元素（本体 + 两个伪元素）的
、
、
要一致，否则视觉错位
动画触发必须依赖类名切换（如
），不能靠 hover —— 移动端没 hover
别用
，它会让未声明的属性也参与过渡，导致意外抖动；明确写
为什么
在 Safari 上可能偏移
旧版 Safari（iOS 12–13）对
的默认行为和 Chrome 不一致：它会以元素左上角为原点旋转，而不是中心点。结果就是三道杠转完之后位置飘了，叉号歪在一边。
这不是 bug，是规范实现差异。解决办法很简单：所有参与旋转的元素都显式声明
。
立即学习
“
前端免费学习笔记（深入）
”；
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
只加在
上不够，
和
也要单独加
如果用了
配合旋转，记得
要在
之前生效，所以顺序写成
没问题，但别写反
不用
做位移，改用
，性能更好，且避免触发重排
移动端点击无响应？检查
和
有些安卓机或微信内置浏览器里，点击汉堡按钮没反应，控制台也没报错。大概率是元素没被识别为可交互目标——尤其当你把按钮做成了空
::before::afterposition: absolute::before::aftercontent: ""widthheightbackground-color.is-activetransition: alltransition: transform 0.3s ease, opacity 0.3s easetransform: rotate()transform-origintransform-origin: center.hamburger::before::aftertranslateY()transform-origintranslatetransform: translateX(...) rotate(...)top/lefttransform: translateY()touch-actioncursor
，又没加任何交互提示。
给按钮加
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，把汉堡按钮包一层
flex-shrink: 0
防止压缩
事情说清了就结束。真正难的不是画三道杠，是让它们在各种屏幕、各种系统里稳稳地转、准准地停、点点就开。