Question

您好StackOverflow社区，

我正在努力制作一个＆＃34; Orbit＆＃34;悬停动画，其中一些div元素堆叠在一起，并且它们具有不同的大小，因此我可以玩围绕＆＃34;行星＆＃34; （即：主要元素）。

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

我认为z-index属性可以解决这个问题，但是当我想到这一点时，我只是想我为另一个动画切换一个动画，因为我用z-index提升了一个动画。然后将成为前面并覆盖现在下面的一个元素。

这里有一些代码：

＆＃13;

#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);
    }
  }
}

＆＃13;

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

＆＃13;

所以，基本上我希望spinner-1和spinner-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>

使用CSS动画动画叠加元素

1 个答案: