卡卡網

本文介紹一款加載動畫，是個旋轉的圓環(huán)，這個圓環(huán)動畫跟以前介紹過的旋轉圓環(huán)動畫不同之處在于，這個圓環(huán)在轉動過程中，是會更換顏色的，每轉一圈，就更換一個顏色。有喜歡這種風格的嗎？可以下載源碼到本地看看。

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實現(xiàn)，class值是loader，可以通過viewBox，cy，cx，r的屬性值來設置圓環(huán)的大小及位置。

我們看到HTML里有6個circle標簽，這代表有6個不同顏色的圓環(huán)轉動，這需要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()的數(shù)值由1到6，設置6個圓環(huán)的顏色，以及動畫延遲時間。

.loader__value設置圓環(huán)的樣式，fill: none; 表示圓環(huán)內無填充，animation: loader-stroke 6s linear infinite;表示每6s循環(huán)轉動一次。

總結

本文介紹一款加載動畫，是個旋轉的圓環(huán)，這個圓環(huán)動畫跟以前介紹過的旋轉圓環(huán)動畫不同之處在于，這個圓環(huán)在轉動過程中，是會更換顏色的，每轉一圈，就更換一個顏色。

該實例是純CSS實現(xiàn)的，無需用到第三方插件，也無需用到JS編程，方便使用。

您可能對以下文章也感興趣

• CSS loading加載動畫(旋轉的圓環(huán))
• 3個漂亮的純CSS動畫進度條
• 8個SVG加載(loading)動畫實例代碼
• 4個漂亮的CSS3 Loading預加載動畫實例
• CSS3 Loading 旋轉圓盤加載動畫
• CSS3 loading音波效果預加載動畫
• CSS3 Loading預加載動畫8個常見實例
• CSS Loading 左右滾動加載動畫等5實例【源碼下載】

標簽: css-loading  加載動畫