装载机时间问题

Question

我很困惑为什么后选择器移动得比没有选择器div快，有人可以解释为什么会这样吗？之前和之后的选择器工作正常，但我似乎无法编辑实际的主要div我有选择器。我在这方面有点新，并为糟糕的格式或任何类型的东西道歉，但我非常感谢对此有所帮助！我希望内部cicle移动最快，中间移动速度慢，外部移动最慢。

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伪元素随之旋转。他们自己的轮换被添加到父母的手中！

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

＆＃13;

＆＃13;

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 */
  }
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;