用CSS动画动画叠加元素

Question

你好，StackOverflow社区，

我试图制作一个“轨道”悬停动画，其中许多div元素堆叠在一起，它们有不同的大小，所以我可以玩围绕“行星”(即主要元素)的边界。

不过，我的问题是，当我将一个div叠加在另一个div上，并且两者都应该是动画时，只有前面的元素会播放动画，而不是下面的。

我认为z索引属性可以解决这个问题，但当我想到这个问题时，我想我会把一个动画换成另一个动画，因为我用z索引提升的动画就会变成前面，覆盖下面的一个元素。

下面是一些代码：

​

#spinner {
  position: relative;
  display: inline-block;
  margin: 50px;
  width: 100px;
  height: 100px;
  background: #eee;
  border-radius: 50%;
}

/* -- -- -- Spin Animation -- -- -- */

#spinner-1 {
  position: absolute;
  top: -4px;
  left: -4px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 4px solid transparent;
  border-top-color: black;
  border-bottom-color: black;
}

#spinner-1:hover {
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg) scale(1);
  }
  50% {
    transform: rotate(180deg) scale(1.2);
  }
  100% {
    transform: rotate(360deg) scale(1);
  }
}

/* -- -- -- Orbit Ring -- -- -- */

#spinner-4 {
  position: absolute;
  top: -8px;
  left: -8px;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #333;
  border-bottom-color: #333;
  border-left-color: #333;
}

#spinner-4:hover {
  animation: spin-2 2s linear infinite;
}

@keyframes spin-2 {
    0% {
      transform: rotate(0deg) scale(1);
    }
    50% {
      transform: rotate(-180deg) scale(1.3);
    }
    100% {
      transform: rotate(-360deg) scale(1);
    }
  }
}

<div id="spinner">
  <div id="spinner-1"></div>
  <div id="spinner-4"></div>
</div>

​

所以，基本上，我希望旋转-1和旋转-4执行他们的动画时，我悬停在旋转器。有什么想法吗？

Answer 1

在他们的共享父元素上设置悬停。

​

#spinner {
  position: relative;
  display: inline-block;
  margin: 50px;
  width: 100px;
  height: 100px;
  background: #eee;
  border-radius: 50%;
}


/* -- -- -- Spin Animation -- -- -- */

#spinner-1 {
  position: absolute;
  top: -4px;
  left: -4px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 4px solid transparent;
  border-top-color: black;
  border-bottom-color: black;
}

#spinner:hover #spinner-1 {
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg) scale(1);
  }
  50% {
    transform: rotate(180deg) scale(1.2);
  }
  100% {
    transform: rotate(360deg) scale(1);
  }
}


/* -- -- -- Orbit Ring -- -- -- */

#spinner-4 {
  position: absolute;
  top: -8px;
  left: -8px;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #333;
  border-bottom-color: #333;
  border-left-color: #333;
}

#spinner:hover #spinner-4 {
  animation: spin-2 2s linear infinite;
}

@keyframes spin-2 {
  0% {
    transform: rotate(0deg) scale(1);
  }
  50% {
    transform: rotate(-180deg) scale(1.3);
  }
  100% {
    transform: rotate(-360deg) scale(1);
  }
}


}

<div id="spinner">
  <div id="spinner-1"></div>
  <div id="spinner-4"></div>
</div>

​