CSS 實現七彩圓環(huán)loading動畫

前言

??CSS 實現七彩圓環(huán)loading動畫,速速來Get吧~

??文末分享源代碼。記得點贊+關注+收藏!

1.實現效果

在這里插入圖片描述

2.實現步驟

  • 定義父容器寬度為--w,每個圓環(huán)之間的gap間距為--gap,圓環(huán)的border邊框寬為--border;
:root {
 --border: 5px;
 --gap: 30px;
 --w: 200px;
}
  • 如何繪制一個半圓環(huán)?
  • 定義一個div元素,假設寬為200px,高為200px/2(即為寬度的一半),圓角,設置border邊框
在這里插入圖片描述
div{
    width: 200px;
    height: 100px;
    border: 5px solid #e94545;
    border-radius: 50%;
}
  • 修改border-radius為50% 50% 0 0/100% 100% 0 0
在這里插入圖片描述
 + border-radius: 50% 50% 0 0/100% 100% 0 0;
 + border-radius: 50%;
  • 去掉底部邊框,就可以得到一個半圓環(huán)了
在這里插入圖片描述
 + border-bottom: none;
  • 在父容器內定義七個半圓環(huán),為每個圓環(huán)添加自定義變量,--c表示當前圓環(huán)的邊框顏色,--i表示當前圓環(huán)的索引位置(從0開始,依次+1)
 <section>
  <div class="loader-item" style="--c: #e94545; --i: 0"></div>
  <div class="loader-item" style="--c: #eb8f34; --i: 1"></div>
  <div class="loader-item" style="--c: #eecf69; --i: 2"></div>
  <div class="loader-item" style="--c: #215221; --i: 3"></div>
  <div class="loader-item" style="--c: #87bb80; --i: 4"></div>
  <div class="loader-item" style="--c: #87ceeb; --i: 5"></div>
  <div class="loader-item" style="--c: #c393eb; --i: 6"></div>
</section>
section {
  width: var(--w);
  height: var(--w);
  position: relative;
}
  • 為每個半圓環(huán)添加樣式,基于父容器absolute定位,水平居中,left為50% - 寬度的一半
  • 第一個圓環(huán)的寬度為--w,每個圓環(huán)的高度都為寬度的一半
在這里插入圖片描述
  • 每個圓環(huán)間的gap為--gap,所以第二個圓環(huán)的寬度為w-gap*2
在這里插入圖片描述
  • 第三個半圓環(huán)的寬度為w-gap22
在這里插入圖片描述
  • 可以得到,每個圓環(huán)的寬度為calc(var(--w) - var(--gap) * 2 * var(--i)),i為當前圓環(huán)的索引位置(從0開始,依次+1)
在這里插入圖片描述
.loader-item {
    --width: calc(var(--w) - var(--gap) * 2 * var(--i));
    width: var(--width);
    height: calc(var(--width) / 2);
    border: var(--border) solid var(--c);
    border-radius: 50% 50% 0 0/100% 100% 0 0;
    border-bottom: none;
    position: absolute;
    left: calc(50% - var(--width) / 2);
 }
  • 為每個半圓環(huán)設置top,第一個圓環(huán)為0,第二個為gap,第三個為gap*2,可得到top為 calc(var(--gap) * var(--i))
在這里插入圖片描述
.loader-item{
 + top: calc(var(--gap) * var(--i));
}
  • 為每個圓環(huán)添加旋轉動畫,哎嘛呀,這轉的也太不和諧了
在這里插入圖片描述
.loader-item{
 + animation: rotate 2s cubic-bezier(0.11, 0.85, 0.22, 1.3) infinite;
}
@keyframes rotate {
    0%,
    25% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
}
  • 添加transform-origin,設置為 50% 100%,這才對了,和諧多了
在這里插入圖片描述
.loader-item{
 + transform-origin: 50% 100%;
}
  • 設置動畫延遲,第一個圓環(huán)延遲-0ms,第二個延遲-60ms,第三個延遲-120ms,即calc(-60ms *
    var(--i)),i為當前圓環(huán)的索引位置(從0開始,依次+1)
在這里插入圖片描述
.loader-item{
 + animation-delay: calc(-60ms * var(--i));
}
  • 父容器添加hover事件,當hover時候,將每個圓環(huán)的亮度提示,并暫停動畫,就完成了啦~
在這里插入圖片描述
 section:hover .loader-item {
  filter: brightness(1.5);
  animation-play-state: paused;
 }
  • 每個半圓環(huán),添加0.5的transition過渡效果
.loader-item{
 + transition: all 0.5s;
}

3.實現代碼

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
  </head>
  <link rel="stylesheet" href="../common.css" />
  <style>
    :root {
      --border: 5px;
      --gap: 15px;
      --w: 200px;
    }
    section {
      width: var(--w);
      height: var(--w);
      position: relative;
    }
    .loader-item {
      --width: calc(var(--w) - var(--gap) * 2 * var(--i));
      width: var(--width);
      height: calc(var(--width) / 2);
      border: var(--border) solid var(--c);
      border-radius: 50% 50% 0 0/100% 100% 0 0;
      border-bottom: none;
      position: absolute;
      left: calc(50% - var(--width) / 2);
      top: calc(var(--gap) * var(--i));
      transform-origin: 50% 100%;
      animation: rotate 2s cubic-bezier(0.11, 0.85, 0.22, 1.3) infinite;
      animation-delay: calc(-60ms * var(--i));
      transition: all 0.5s;
    }
    section:hover .loader-item {
      filter: brightness(1.5);
      animation-play-state: paused;
    }
    @keyframes rotate {
      0%,
      25% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }
  </style>
  <body>
    <section>
      <div class="loader-item" style="--c: #e94545; --i: 0"></div>
      <div class="loader-item" style="--c: #eb8f34; --i: 1"></div>
      <div class="loader-item" style="--c: #eecf69; --i: 2"></div>
      <div class="loader-item" style="--c: #215221; --i: 3"></div>
      <div class="loader-item" style="--c: #87bb80; --i: 4"></div>
      <div class="loader-item" style="--c: #87ceeb; --i: 5"></div>
      <div class="loader-item" style="--c: #c393eb; --i: 6"></div>
    </section>
  </body>
</html>

4.寫在最后??

看完本文如果覺得對你有一丟丟幫助,記得點贊+關注+收藏鴨 ??
更多相關內容,關注??蘇蘇的bug,??蘇蘇的github,??蘇蘇的碼云~
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容