javascript - 依次改变4个圆圈的边框颜色？

Question

我有 4 个白色圆圈，我希望其中一个变为蓝色 1 秒，下一个变为蓝色 1 秒，依此类推，总共 4 秒。我正在考虑只用 CSS 动画来尝试这个，但我想我需要 JavaScript.. 关于如何实现这一点有什么想法吗？谢谢!

示例:/image/aYFXV.jpg

HTML:

<div class="circles">
  <div class="circle c1">
    <div class="circle c2">
      <div class="circle c3">
          <div class="circle c4"></div>
      </div>
    </div>
  </div>
</div>

CSS:

.circle {
  border-radius: 50%;
  background: transparent;
  border: 10px solid white;
  width: 300px;
  height: 300px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
    max-width: 100%;
}

.c2 {
  width: 250px;
  height: 250px;
  border-color: white;
}

.c3 {
  width: 200px;
  height: 200px;
  border-color: white;
}

.c4 {
  width: 150px;
  height: 150px;
}

这是 JSFiddle:https://jsfiddle.net/ydb48372/3/

Answer 1

您只需 css 即可做到这一点动画。首先创建 4 秒持续时间的动画，将边框颜色设置为蓝色 1 秒或 25%这 4 秒的时间和动画的其余部分将边框颜色返回为灰色或 75%完整的动画时间。现在你只需要使用 animation-delay在每个圆圈上，以便当前一个圆圈的颜色变为灰色时 1 秒后开始一个圆圈上的动画。

.circles {
  position: relative;
  min-height: 100vh;
}
.circle {
  border-radius: 50%;
  border: 10px solid gray;
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation-duration: 4s;
  animation-name: changeColor;
  animation-iteration-count: infinite;
}
.c1 {
  height: 300px;
  width: 300px;
}
.c2 {
  height: 250px;
  width: 250px;
  animation-delay: 1s;
}
.c3 {
  height: 200px;
  width: 200px;
  animation-delay: 2s;
}
.c4 {
  height: 150px;
  width: 150px;
  animation-delay: 3s;
}

@keyframes changeColor {
  0% {
    border-color: #1C50A8;
  }
  24% {
    border-color: #1C50A8;
  }
  25% {
    border-color: gray;
  }
  100% {
    border-color: gray;
  }
}

<div class="circles">
  <div class="circle c1">
    <div class="circle c2">
      <div class="circle c3">
        <div class="circle c4"></div>
      </div>
    </div>
  </div>
</div>