CSS实现菜单图标悬停时顶部和中间span从左到右收缩过渡

我明白你想要实现的菜单图标悬停效果——顶部和中间的横线从左到右收缩，而且完全用CSS搞定对吧？你现在遇到的问题是hover时所有span都变成一样的尺寸，这是因为你没有给不同的span单独设置样式规则，咱们来修正这个问题：

解决方案：用CSS Transform实现精准的左到右收缩 #

这种方式能让收缩动画从左侧开始，完全符合你的需求，而且动画性能更好（属于GPU加速属性）：

.menu-btn {
  width: 28px;
  position: absolute;
  left: 30px;
  height: 23px;
  top: 17px;
  display: block;
  cursor: pointer; /* 加上鼠标指针，提升交互体验 */
}

.menu-btn span {
  display: block;
  height: 2px;
  background: #000;
  margin: 6px 0;
  transition: transform 0.3s ease; /* 统一设置过渡动画时长和曲线 */
  transform-origin: left center; /* 指定变换的基准点：左侧中心 */
}

/* 仅针对顶部和中间的span添加悬停收缩效果 */
.menu-btn:hover span:nth-child(1),
.menu-btn:hover span:nth-child(2) {
  transform: scaleX(0.5); /* 缩放比例可自定义，0为完全收缩，1为原尺寸 */
}

/* 第三个span保持原样，不需要变化 */
.menu-btn span:nth-child(3) {
  transition: none; /* 取消过渡，避免不必要的动画 */
}

关键细节解释 #

1. transform-origin: left center：这是实现“从左到右收缩”的核心，它让span元素的缩放变换以左侧为基准点，而不是默认的元素中心（默认会从两边同时收缩）。
2. nth-child()选择器：精准选中顶部（第1个）和中间（第2个）的span，只给它们添加悬停效果，第三个span不受影响。
3. 用transform而非width：transform属性属于GPU加速范畴，动画会比直接修改width更流畅，视觉效果也更精准。

如果你偏好直接修改宽度的方式（虽然是双向收缩），也可以这样写：

.menu-btn span {
  display: block;
  height: 2px;
  background: #000;
  margin: 6px 0;
  transition: width 0.3s ease;
  width: 100%; /* 初始宽度 */
}

.menu-btn:hover span:nth-child(1),
.menu-btn:hover span:nth-child(2) {
  width: 50%; /* 悬停后的目标宽度 */
}

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