纯css实现汉堡按钮转“×”需用checkbox+label触发，三条线由span及其::before、::after构成，:checked状态分别控制主横线rotate(45deg)、上横线rotate(0deg)、下横线rotate(90deg)，配合transform-origin:center和transition:transform 0.3s ease；菜单显隐须用transform/opacity等可过渡属性，禁用display:none。
汉堡按钮三条线怎么用 CSS 旋转成“×”
核心不是靠 JS 改 class，而是用 :checked 配合 transform 控制每条线的旋转角度。三条线通常用一个 <span></span> 加两个伪元素 ::before 和 ::after 构成，这样能统一控制过渡动画。
常见错误是直接对整个容器 rotate(45deg)，结果三条线一起转，没法形成标准“×”。正确做法是：
- 主横线（
span）在激活态 rotate(45deg) - 上横线（
span::before）rotate(0deg)，并设top: -8px与主横线重叠 - 下横线（
span::after）rotate(90deg)，再加top: 8px让它垂直交叉
所有旋转必须配合 transition: transform 0.3s ease，否则就是瞬切。别漏掉 transform-origin: center，否则旋转中心偏移，线条错位。
为什么 display: none 不能和 transition 一起用
display 是离散属性，没有中间状态，transition 对它完全无效。想让菜单滑入滑出，得换用 transform: translateX(-100%) 或 opacity: 0 这类可插值的属性。
实际中推荐组合：
- 菜单容器用
transform: translateX(-100%)移出视口，激活时改为translateX(0) - 同时配
visibility: hidden+opacity: 0，避免不可见时仍占布局或被聚焦 - 千万别只靠
visibility—— 它不触发重排，但没opacity就没淡入效果
纯 CSS 实现点击切换，关键 HTML 结构长什么样
必须用 <input type="checkbox"> 做状态开关，隐藏它，再用 label 当按钮。这是唯一不依赖 JS 实现“点击即切换”的合法方式。
典型结构：
<input id="menu-toggle" type="checkbox"><label for="menu-toggle" class="hamburger"> <span></span> </label> <nav class="menu">...</nav>
后续样式全靠选择器驱动：
-
#menu-toggle:checked + .hamburger span控制主横线旋转 -
#menu-toggle:checked ~ .menu控制菜单滑入（注意是~，不是+） -
for="menu-toggle"必须和id严格匹配，大小写、空格都不能错
移动端点击没反应？先检查这三件事
不是 JS 没加载，而是 CSS 层级或触发条件卡住了：
- 确保
label或span有cursor: pointer和足够点击热区（最小 44×44px） - 检查是否被父容器
pointer-events: none拦截，尤其用fixed定位时容易漏 - 媒体查询里如果写了
.hamburger { display: none }，记得在小屏断点里设回display: block，否则按钮根本点不到
最易忽略的是：伪元素默认 content: "" 才生效，漏写就等于没那两条线，旋转再准也白搭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
