本文详解如何通过调整伪元素的 transform: translateY() 值，精准缩小汉堡图标中三条横线的垂直间距，同时保持动画逻辑与响应式结构完整，适用于自定义尺寸、角落布局等实际场景。
本文详解如何通过调整伪元素的 `transform: translatey()` 值，精准缩小汉堡图标中三条横线的垂直间距，同时保持动画逻辑与响应式结构完整，适用于自定义尺寸、角落布局等实际场景。
在构建响应式导航栏时，汉堡图标（☰）常需适配紧凑空间（如右上角小区域），但默认实现中三条线之间的间距往往过大，导致整体图标显得臃肿。问题根源在于：当前 CSS 使用 ::before 和 ::after 伪元素模拟上下两条线，并通过 transform: translateY() 控制其垂直偏移——而该偏移量（如 -16px / +16px）直接决定了三线间距，并非由 margin/padding 或 font-size 决定。
要缩小整体图标高度并压缩线间距离，关键操作是减小 translateY() 的绝对值。例如：
.menu-btn__burger::before {
transform: translateY(-10px); /* 原为 -16px → 间距显著收窄 */
}
.menu-btn__burger::after {
transform: translateY(10px); /* 原为 +16px */
}此时，三条线（主元素 + 两个伪元素）的垂直中心距从 32px（16×2）缩减至 20px（10×2），图标视觉高度自然降低。你可按需进一步微调（如 -8px/+8px），推荐以 2px 为步进单位进行测试。
⚠️ 注意事项：
- 勿修改 .menu-btn__burger 自身的 height：它仅控制中间线粗细，不影响间距；
- 动画兼容性需同步调整：当 translateY() 值变更后，旋转动画中的 translate(35px, ±35px) 可能需微调，确保关闭态下三条线完美重叠。建议将动画位移值按比例缩放（如原 35px → 22px）；
-
响应式增强建议：为适配移动端小屏幕，可在媒体查询中统一缩放：
@media (max-width: 768px) { .menu-btn { width: 32px; height: 32px; } .menu-btn__burger { width: 24px; height: 4px; } .menu-btn__burger::before, .menu-btn__burger::after { width: 24px; height: 4px; } .menu-btn__burger::before { transform: translateY(-8px); } .menu-btn__burger::after { transform: translateY(8px); } }
最终效果：图标整体更紧凑，三条线间距均匀可控，且不破坏原有交互动画逻辑与 DOM 结构。此方法轻量、高效，是优化自定义汉堡图标的首选实践。
