悬停在 div 框上时动画两个元素？

Question

我想制作这个关闭按钮，当我将鼠标悬停在它上面时会执行此动画。一条线必须走到一侧，反之亦然，但我坚持这一点，我不知道是否有解决方案。就像当鼠​​标进入父（关闭）区域时必须进行 360 度旅行，或者类似的东西，但主要目的是它们两者同时工作，这是我无法实现的。 ´ 预先感谢您<3

#close {
  width: 35px;
  height: 35px;
  display: block;
  margin: 0 auto;
  box-sizing: border-box;
  padding-top: 50px;
}

#close .bar5,
#close .bar6,
#close .bar7 {
  width: 35px;
  height: 3px;
  background-color: black;
  margin: 6px 0;
  transition: 0s;
}

.bar5:hover {
  animation: rota2 1.2s ease-in-out;
}

.bar7:hover {
  animation: rota1 1.2s ease-in-out;
}

.bar5 {
  -webkit-transform: rotate(-45deg) translate(-6px, 6px);
  transform: rotate(-45deg) translate(-6px, 6px);
}

.bar6 {
  opacity: 0;
}

.bar7 {
  -webkit-transform: rotate(45deg) translate(-6px, -8px);
  transform: rotate(45deg) translate(-6px, -8px);
}

@keyframes rota1 {
  0% {
    -webkit-transform: rotate(45deg)translate(-6px, -8px);
    transform: rotate(45deg)translate(-6px, -8px);
  }
  100% {
    -webkit-transform: rotate(-320deg) translate(-6px, -8px);
    transform: rotate(-320deg) translate(-6px, -8px);
  }
}

@keyframes rota2 {
  0% {
    -webkit-transform: rotate(-45deg)translate(-6px, 6px);
    transform: rotate(-45deg)translate(-6px, 6px);
  }
  100% {
    -webkit-transform: rotate(320deg) translate(-6px, 6px);
    transform: rotate(320deg) translate(-6px, 6px);
  }
}

<div id="close">
  <div class="bar5"></div>
  <div class="bar6"></div>
  <div class="bar7"></div>

</div>

Answer 1

您可以使用 > 选择直接子元素并为其指定效果。

我删除了您的填充样式，因为它会使 hover 效果无法按预期工作。

#close {
    width: 50px;
    height: 50px;
    display: block;
    margin: 0 auto;
    box-sizing: border-box;
}

#close .bar5,
#close .bar6,
#close .bar7 {
    width: 35px;
    height: 3px;
    background-color: black;
    margin: 6px 0;
    transition: 0s;
}
#close:hover > .bar5{
animation: rota1 1.2s ease-in-out;
}
#close:hover > .bar7{
animation: rota2 1.2s ease-in-out;
}


.bar5 {
    -webkit-transform: rotate(-45deg) translate(-6px, 6px);
    transform: rotate(-45deg) translate(-6px, 6px);
}

.bar6 {
    opacity: 0;
}

.bar7 {
    -webkit-transform: rotate(45deg) translate(-6px, -8px);
    transform: rotate(45deg) translate(-6px, -8px);
}

@keyframes rota1 {
    0% {
        -webkit-transform: rotate(45deg)translate(-6px, -8px);
        transform: rotate(45deg)translate(-6px, -8px);
    }
    100% {
        -webkit-transform: rotate(-320deg) translate(-6px, -8px);
        transform: rotate(-320deg) translate(-6px, -8px);
    }
}

@keyframes rota2 {
    0% {
        -webkit-transform: rotate(-45deg)translate(-6px, 6px);
        transform: rotate(-45deg)translate(-6px, 6px);
    }
    100% {
        -webkit-transform: rotate(320deg) translate(-6px, 6px);
        transform: rotate(320deg) translate(-6px, 6px);
    }
}

<div id="close">
                    <div class="bar5"></div>
                    <div class="bar6"></div>
                    <div class="bar7"></div>

                </div>