我正在尝试使一条线在悬停时(在过渡中)从另外两条线中分离出来

<div class="line-container">
  <div class="line"></div>
  <div class="line"></div>
  <div class="line"></div>
</div>

.line-container {
  position: relative;
  width: 100px; /* 根据实际需求设置容器宽度 */
  height: 2px; /* 根据实际需求设置容器高度 */
}

.line {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: black; /* 根据实际需求设置线的颜色 */
  transition: transform 0.3s ease; /* 设置过渡效果，使线在悬停时平移 */
}

.line:nth-child(1) {
  top: 0;
  transform: translateY(-50%);
}

.line:nth-child(2) {
  top: 50%;
  transform: translateY(-50%);
}

.line:nth-child(3) {
  bottom: 0;
  transform: translateY(50%);
}

.line-container:hover .line:nth-child(1) {
  transform: translateY(-100%);
}

.line-container:hover .line:nth-child(3) {
  transform: translateY(100%);
}