加载器计时问题答案

【问题标题】：Loader timing issues加载器计时问题
【发布时间】：2018-11-23 11:07:05
【问题描述】：

我很困惑为什么 after 选择器比 no selector 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>

【问题讨论】：

抱歉，我在格式化 jfiddle 时遇到了问题，因为我以前从未在这里发过帖子
欢迎来到 Stack Overflow。如果代码的开头格式正确，只需将其粘贴进去，选择它，然后单击{} 小部件。这会将其向右移动 4 个空格，从而将其呈现为代码。我建议避免在原版中使用制表符，除非它们始终设置为每个制表符 4 个空格。
@JeffLearman 感谢您的提示，我想我现在明白了！

标签： html css animation loader

【解决方案1】：

问题是整个.loader div 每2 秒旋转一次，因此::before 和::after 伪元素也随之旋转。他们自己的轮换被添加到父母的轮换中！

所以解决方案是调整伪元素的旋转，使它们相对于主元素移动。如果你想让::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>

【讨论】：

我认为这与以下事实有关：圆圈越大，它必须在同一秒内覆盖的距离越远，所以他们首先必须走得更快，但即使我给::after 100 秒的持续时间，它仍然会更快。我没想到伪元素自己会采用它的父转换，所以我今天也学到了一些新东西。谢谢！