加载程序时序问题

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 的！

所以解决方案是调整 pseudo-elements' 旋转，使它们相对于主要元素移动。 ::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>

加载程序时序问题

Loader timing issues

html

css

animation

loader