纯CSS实现的转动的圆环加载动画

技术频道 - html技术

纯CSS实现的转动的圆环加载动画

作者:admin 时间:2022-1-23 9:52:59 浏览:

本文介绍一款加载动画，是个旋转的圆环，这个圆环动画跟以前介绍过的旋转圆环动画不同之处在于，这个圆环在转动过程中，是会更换颜色的，每转一圈，就更换一个颜色。有喜欢这种风格的吗？可以下载源码到本地看看。

HTML

<svg class="loader" viewBox="0 0 24 24">
  <circle class="loader__value" cx="12" cy="12" r="10" />
  <circle class="loader__value" cx="12" cy="12" r="10" />
  <circle class="loader__value" cx="12" cy="12" r="10" />
  <circle class="loader__value" cx="12" cy="12" r="10" />
  <circle class="loader__value" cx="12" cy="12" r="10" />
  <circle class="loader__value" cx="12" cy="12" r="10" />
</svg>

HTML使用SVG实现，class值是loader，可以通过viewBox，cy，cx，r的属性值来设置圆环的大小及位置。

我们看到HTML里有6个circle标签，这代表有6个不同颜色的圆环转动，这需要CSS作相应的设置。

CSS

.loader {
  -webkit-animation: loader-turn 1s linear infinite;
          animation: loader-turn 1s linear infinite;
  padding: 1rem;
  max-width: 60px;
  width: 100%;
}
@-webkit-keyframes loader-turn {
  50% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(720deg);
  }
}
@keyframes loader-turn {
  50% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(720deg);
  }
}

.loader__value {
  -webkit-animation: loader-stroke 6s linear infinite;
          animation: loader-stroke 6s linear infinite;
  fill: none;
  stroke-dasharray: 63;
  stroke-dashoffset: 63;
  stroke-linecap: round;
  stroke-width: 4;
}
.loader__value:nth-child(1) {
  stroke: dodgerblue;
}
.loader__value:nth-child(2) {
  stroke: mediumspringgreen;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}
.loader__value:nth-child(3) {
  stroke: crimson;
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
}
.loader__value:nth-child(4) {
  stroke: peachpuff;
  -webkit-animation-delay: 3s;
          animation-delay: 3s;
}
.loader__value:nth-child(5) {
  stroke: chocolate;
  -webkit-animation-delay: 4s;
          animation-delay: 4s;
}
.loader__value:nth-child(6) {
  stroke: pink;
  -webkit-animation-delay: 5s;
          animation-delay: 5s;
}
@-webkit-keyframes loader-stroke {
  8.3333333333% {
    stroke-dashoffset: 0;
  }
  16.6666666667%, 100% {
    stroke-dashoffset: 63;
  }
}
@keyframes loader-stroke {
  8.3333333333% {
    stroke-dashoffset: 0;
  }
  16.6666666667%, 100% {
    stroke-dashoffset: 63;
  }
}