html - 加载程序时序问题

Question

我很困惑为什么后选择器比无选择器 div 移动得更快，谁能解释为什么会这样？前后选择器工作正常，但我似乎无法编辑我关闭选择器的实际主 div。我对此有点陌生，并为格式不佳或类似问题道歉，但我将非常感谢对此提供的帮助!我希望内圈移动最快，中间移动较慢，外圈最慢。

https://jsfiddle.net/wnmsfudo/1/

html,
body {
  height: 100vh;
  width: 100vw;
}

.loader {
  margin-top: -80px;
  content: "";
  display: block;
  position: absolute;
  top: 50vh;
  left: 46vw;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: red;
  animation: spin 2s linear infinite;
}

.loader::before {
  content: "";
  display: block;
  position: absolute;
  top: 12.5px;
  left: 12.5px;
  width: 75px;
  height: 75px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: green;
  animation: spin 1s linear infinite;
}

.loader::after {
  content: "";
  display: block;
  position: absolute;
  top: -12.5px;
  left: -12.5px;
  width: 125px;
  height: 125px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: blue;
  animation: spin 3s linear infinite;
}

@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    /* Chrome, Opera 15+, Safari 3.1+ */
    -ms-transform: rotate(0deg);
    /* IE 9 */
    transform: rotate(0deg);
    /* Firefox 16+, IE 10+, Opera */
  }
  100% {
    -webkit-transform: rotate(360deg);
    /* Chrome, Opera 15+, Safari 3.1+ */
    -ms-transform: rotate(360deg);
    /* IE 9 */
    transform: rotate(360deg);
    /* Firefox 16+, IE 10+, Opera */
  }
}

<div class="container">
  <div class="loader"></div>
</div>

Answer 1

问题在于整个 .loader div 每 2 秒旋转一次，并且 ::before 和 ::after 伪元素因此随之旋转。他们自己的轮换被添加到 parent 的轮换中!

所以解决方案是调整伪元素的旋转，使它们相对于主元素移动。 ::after 如果你想让它看起来更慢，甚至需要反向旋转。

html, body {
  height: calc(100% - 16px);
}

.loader {
  margin-top: -80px;
  content: "";
  display: block;
  position: absolute;
  top: 50vh;
  left: 46vw;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: red;
  animation: spin 2s linear infinite;
}

.loader::before {
  content: "";
  display: block;
  position: absolute;
  top: 12.5px;
  left: 12.5px;
  width: 75px;
  height: 75px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: green;
  animation: spin 5s linear infinite;
}

.loader::after {
  content: "";
  display: block;
  position: absolute;
  top: -12.5px;
  left: -12.5px;
  width: 125px;
  height: 125px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: blue;
  animation: spin 5s linear reverse infinite;
}

@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    /* Chrome, Opera 15+, Safari 3.1+ */
    -ms-transform: rotate(0deg);
    /* IE 9 */
    transform: rotate(0deg);
    /* Firefox 16+, IE 10+, Opera */
  }
  100% {
    -webkit-transform: rotate(360deg);
    /* Chrome, Opera 15+, Safari 3.1+ */
    -ms-transform: rotate(360deg);
    /* IE 9 */
    transform: rotate(360deg);
    /* Firefox 16+, IE 10+, Opera */
  }
}

<div class="container">
  <div class="loader">
  </div>
</div>