一个接一个地更改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持续时间的动画，将边框颜色设置为蓝色1秒或4秒的25%时间，其余动画将边框颜色恢复为灰色或完整动画时间的75%。现在你只需要在每个圆圈上使用animation-delay，这样当一个圆圈上的动画从前一个圆圈的颜色变为灰色时，就会在一个圆圈上开始动画。

＆＃13;

＆＃13;

.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;
  }
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以使用css3关键帧来实现您的目标。您可能必须使用这些数字来获得您想要的确切时间，但这应该是可以实现的。

div {
    -webkit-animation: mymove 5s infinite; /* Safari 4.0 - 8.0 */
    animation: mymove 5s infinite;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes mymove {
    0%   {border-color: white;}
    100% {border-color: blue;}
}

/* Standard syntax */
@keyframes mymove {
    0%   {border-color: white;}
    100% {border-color: blue;}
}

Answer 3

像评论员一样使用动画延迟提及是正确的。

.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;
}

.c1, .c2, .c3, .c4 {
  animation: 400ms change-border-color forwards;
}
.c2 {
  animation-delay: 450ms;
}
.c3 {
  animation-delay: 900ms;
}
.c4 {
  animation-delay: 1350ms;
}
@keyframes change-border-color {
  from { border-color: white; }
  to { border-color: blue; }
}

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

Answer 4

css中的

Refer 动画和动画延迟属性

 animation: animate 1s;
 animation-delay: 1s;

Fiddle

Answer 5

这是使用.circles

上的伪元素的解决方案

我已使用关键帧更改height，width和position。

fiddle

＆＃13;

＆＃13;

body {
  background: grey;
}

.circles {
  position: relative;
}

.circles::after {
  position: absolute;
  content: "";
  width: 300px;
  height: 300px;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  border: 10px solid blue;
  border-radius: 50%;
  -webkit-animation: blue 5s infinite;
  -moz-animation: blue 5s infinite;
  -o-animation: blue 5s infinite;
  animation: blue 5s infinite;
}

.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;
}

@keyframes blue {
  25% {
    width: 300px;
    height: 300px;
    top: 0px;
  }
  25.001% {
    width: 250px;
    height: 250px;
    top: 25px;
  }
  50% {
    width: 250px;
    height: 250px;
    top: 25px;
  }
  50.001% {
    width: 200px;
    height: 200px;
    top: 50px;
  }
  75% {
    width: 200px;
    height: 200px;
    top: 50px;
  }
  75.001% {
    width: 150px;
    height: 150px;
    top: 75px;
  }
  100% {
    width: 150px;
    height: 150px;
    top: 75px;
  }
}

＆＃13;

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

</div>

＆＃13;

＆＃13;

＆＃13;