动画不会出现在父背景上

Question

我正在尝试为一行中的 3 个圆圈设置动画。

开始和结束圆显示没有问题，但 'center' 圆有白色背景，我假设来自父 div。

我希望中心圆圈与其他圆圈具有相同的背景。有什么想法可以实现吗？

@keyframes animate {
  0%,
  100% {
    box-shadow: -28px 0 0 -0.8em, 0 0 0 -0.8em, 28px 0 0 -0.8em;
  }

  12.5% {
    box-shadow: -28px 0 0 0, 0 0 0 -0.8em, 28px 0 0 -0.8em;
  }

  25% {
    box-shadow: -28px 0 0 0.2em, 0 0 0 0, 28px 0 0 -0.8em;
  }

  37.5% {
    box-shadow: -28px 0 0 0, 0 0 0 0.2em, 28px 0 0 0;
  }

  50% {
    box-shadow: -28px 0 0 -0.2em, 0 0 0 0, 28px 0 0 0.2em;
  }

  62.5% {
    box-shadow: -28px 0 0 -0.4em, 0 0 0 -0.2em, 28px 0 0 0;
  }

  75% {
    box-shadow: -28px 0 0 -0.6em, 0 0 0 -0.4em, 28px 0 0 -0.2em;
  }
}

#app {
  align-items: center;
  display: flex;
  height: 100vh;
  justify-content: center;
  pointer-events: none;
  width: 100%;
}

#spinner {
  border-radius: 9999px;
  animation: animate 2s infinite linear;
  width: 7px;
  height: 7px;
}

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="./src/styles.css" />
  </head>

  <body>
    <div id="app">
      <div id="spinner"></div>
    </div>
  </body>
</html>

Answer 1

试试这个。您可以根据自己的喜好调整速度。

.spinner,
.spinner:before,
.spinner:after {
  border-radius: 50%;
  width: 2.5em;
  height: 2.5em;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation: animate 2s infinite linear;
  animation: animate 2s infinite linear;
}
.spinner {
  color: black;
  font-size: 10px;
  margin: 80px auto;
  position: relative;
  text-indent: -9999em;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}
.spinner:before,
.spinner:after {
  content: '';
  position: absolute;
  top: 0;
}
.spinner:before {
  left: -3.5em;
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}
.spinner:after {
  left: 3.5em;
}
@-webkit-keyframes animate {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em;
  }
  40% {
    box-shadow: 0 2.5em 0 0;
  }
}
@keyframes animate {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em;
  }
  40% {
    box-shadow: 0 2.5em 0 0;
  }
}

<div class="spinner"></div>

Answer 2

问题在于元素本身的形状总是从 box-shadow 中切出。这就是 background: transparent 也不起作用的原因。 background: #000也不行，因为这样中间的圆不能小于7x7px。

然而，您可以做的是在 y 轴上应用偏移量（我使用 +10px），然后使用 transform: translateY():[=16 将整个元素向后移动（在本例中为 -10px） =]

@keyframes animate {
  0%,
  100% {
    box-shadow: -28px 10px 0 -0.8em, 0 10px 0 -0.8em, 28px 0 10px -0.8em;
  }

  12.5% {
    box-shadow: -28px 10px 0 0, 0 10px 0 -0.8em, 28px 0 10px -0.8em;
  }

  25% {
    box-shadow: -28px 10px 0 0.2em, 0 10px 0 0, 28px 10px 0 -0.8em;
  }

  37.5% {
    box-shadow: -28px 10px 0 0, 0 10px 0 0.2em, 28px 10px 0 0;
  }

  50% {
    box-shadow: -28px 10px 0 -0.2em, 0 10px 0 0, 28px 10px 0 0.2em;
  }

  62.5% {
    box-shadow: -28px 10px 0 -0.4em, 0 10px 0 -0.2em, 28px 10px 0 0;
  }

  75% {
    box-shadow: -28px 10px 0 -0.6em, 0 10px 0 -0.4em, 28px 10px 0 -0.2em;
  }
}

#app {
  align-items: center;
  display: flex;
  height: 100vh;
  justify-content: center;
  pointer-events: none;
  width: 100%;
}

#spinner {
  border-radius: 9999px;
  animation: animate 2s infinite linear;
  width: 7px;
  height: 7px;
  transform: translateY(-10px);
}

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="./src/styles.css" />
  </head>

  <body>
    <div id="app">
      <div id="spinner"></div>
    </div>
  </body>
</html>

动画不会出现在父背景上

Animation does not appear over parent background

css

animation