如何消除汉堡图标线条间距并缩小其整体尺寸

你的问题出在汉堡图标各个元素用的都是固定像素值，单独调整某一个属性（比如线条高度）会破坏整体布局，必须统一按比例调整所有相关的尺寸和位移参数，才能实现整体缩小且保证动画正常。

以下是修改后的完整代码，以缩小到原尺寸的75%为例：

修改后的CSS代码 #

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #272727;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

/* 缩小容器尺寸，原40px改为30px */
.menu-btn {
  position: absolute;
  top: 10%;
  left: 90%;
  width: 30px;
  height: 30px;
  cursor: pointer;
  transition: all .5s ease-in-out;
}

/* 调整主线条的宽高，原30px/6px改为22px/4px */
.menu-btn__burger {
  width: 22px;
  height: 4px;
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(255, 101, 47, .2);
  transition: all .5s ease-in-out;
}

/* 调整伪元素的宽高和位移，原40px/6px改为30px/4px，位移从16px改为12px */
.menu-btn__burger::before,
.menu-btn__burger::after {
  content: '';
  position: absolute;
  width: 30px;
  height: 4px;
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(255, 101, 47, .2);
  transition: all .5s ease-in-out;
}

.menu-btn__burger::before {
  transform: translateY(-12px);
}

.menu-btn__burger::after {
  transform: translateY(12px);
}

/* 调整动画位移值，原35px改为26px，保证叉号位置正确 */
.menu-btn.open .menu-btn__burger {
  transform: translateX(-50px);
  background: transparent;
  box-shadow: none;
}

.menu-btn.open .menu-btn__burger::before {
  transform: rotate(45deg) translate(26px, -26px);
}

.menu-btn.open .menu-btn__burger::after {
  transform: rotate(-45deg) translate(26px, 26px);
}

调整逻辑说明 #

• 容器.menu-btn的宽高是整个图标的基础，先按比例缩小它
• 主线条和伪元素的宽高要跟着容器比例调整，保持视觉一致
• 伪元素的translateY值要和线条高度、容器尺寸匹配，保证间距均匀
• 动画里的translate值也要按比例修改，否则切换成叉号时会错位

如果需要更小的尺寸，比如50%，只需要按同样的比例换算所有数值即可：

• 容器改成20x20px
• 主线条宽15px、高3px
• 伪元素宽20px、高3px，位移改成-8px和8px
• 动画位移改成20px左右

内容的提问来源于stack exchange，提问作者meta pool