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

Question

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

示例:http://imgur.com/a/h0Wy0

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 做到这一点动画。首先创建持续时间为 4s 的动画，将 border-color 设置为蓝色持续 1s 或 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>