技术频道导航
HTML/CSS
.NET技术
IIS技术
PHP技术
Js/JQuery
Photoshop
Fireworks
服务器技术
操作系统
网站运营

赞助商

分类目录

赞助商

最新文章

搜索

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

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

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

demodownload

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,可以通过viewBoxcycxr的属性值来设置圆环的大小及位置。

我们看到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;
  }
}

.loader__value:nth-child()的数值由1到6,设置6个圆环的颜色,以及动画延迟时间。

.loader__value设置圆环的样式,fill: none; 表示圆环内无填充,animation: loader-stroke 6s linear infinite;表示每6s循环转动一次。

总结

本文介绍一款加载动画,是个旋转的圆环,这个圆环动画跟以前介绍过的旋转圆环动画不同之处在于,这个圆环在转动过程中,是会更换颜色的,每转一圈,就更换一个颜色。

该实例是纯CSS实现的,无需用到第三方插件,也无需用到JS编程,方便使用。

您可能对以下文章也感兴趣

标签: css-loading  加载动画  
x
  • 站长推荐
/* 左侧显示文章内容目录 */