纯CSS汉堡图标用一个按钮加::before和::after生成三横线：主元素为中线，伪元素为上下线，通过position:absolute叠合，统一设宽高、背景色及transform动画实现三线转叉号。

汉堡图标怎么用 ::before 和 ::after 生成三横线

三横线本质是三个独立的块级元素，但你不需要写三个 。用一个 ，配合 ::before 和 ::after 就能凑齐三根——主元素本身是一横，伪元素各撑一根。

关键点在于统一控制尺寸、背景色和定位：

• position: relative 必须加在父元素上，否则伪元素的 top/left 会相对于 body 定位
• 三根线默认垂直居中对齐，推荐用 top: 50%; transform: translateY(-50%) 而不是 top: 2px 这类魔法数字
• 每根线高度设为 2px，宽度设为 24px（适配小屏），背景色用 currentColor 方便继承文字色

点击后如何让三横变成叉号：关键在 transform 组合

动画不是靠“替换 DOM”，而是靠改变三根线的位置和旋转角度。叉号由两根斜线组成，所以需要：

• 顶部线：rotate(45deg) + translateY(6px)
• 中间线：完全隐藏（opacity: 0）
• 底部线：rotate(-45deg) + translateY(-6px)

注意：所有 transform 必须写在同一行，用空格分隔，比如 transform: rotate(45deg) translateY(6px)；如果写成两行，后写的会覆盖前写的。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

为什么加了 transition 动画还是卡顿或不触发

常见原因不是代码写错，而是过渡属性没锁准：

• 只写 transition: all 0.3s 很危险——浏览器要重绘所有可变属性，容易掉帧
• 应精确指定： transition: transform 0.3s ease, opacity 0.3s ease
• 必须给三根线都加 transition，包括伪元素；漏掉 .hamburger::after 的声明就会导致它突变
• 移动端记得加 will-change: transform（仅对频繁动画的元素），但别滥用，否则可能引发渲染层爆炸

如何用 :checked + 替代 JS 控制状态

纯 CSS 实现开关，比监听 click 事件更轻量，也避免 JS 加载失败导致菜单失灵：

• 把 放在 前面
• 用 .hamburger { background: none; border: none; } 清掉默认样式，再用伪元素画图
• 状态切换靠 #menu-toggle:checked ~ .hamburger::before 这类兄弟选择器驱动样式变化
• 注意：CSS 无法监听“点击以外”的关闭动作（如 Esc 或点击遮罩层），这种场景仍需 JS 补充

最易被忽略的是层级和可访问性—— 不能 display: none，得用 position: absolute; clip: rect(0 0 0 0); 隐藏同时保留语义。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！