CSS實(shí)現(xiàn)漸變式圓點(diǎn)加載動(dòng)畫

發(fā)布時(shí)間：2024-03-22 08:44:27 作者：設(shè)計(jì)師工作日常

我要評(píng)論

這篇文章主要為大家詳細(xì)介紹了如何使用 css3 模擬一個(gè)漸變式圓點(diǎn)加載效果，文中的示例代碼講解詳細(xì)，具有一定的借鑒價(jià)值，有需要的小伙伴可以跟隨小編一起學(xué)習(xí)一下

整體效果

知識(shí)點(diǎn)： animation 時(shí)間函數(shù) steps()。

用 css3 模擬一個(gè)漸變式圓點(diǎn)加載效果。

核心代碼部分，簡(jiǎn)要說明了寫法思路；完整代碼在最后，可直接復(fù)制到本地運(yùn)行。

核心代碼

html 代碼

<div class="loading38">
  <span class="load-span38"></span>
  <span class="load-span38"></span>
  <span class="load-span38"></span>
  <span class="load-span38"></span>
  <span class="load-span38"></span>
  <span class="load-span38"></span>
  <span class="load-span38"></span>
  <span class="load-span38"></span>
</div>

用8個(gè) span 標(biāo)簽繪制8個(gè)圓點(diǎn)。

css 部分代碼

.loading38 {
  --r-num: 45deg; /*定義角度值*/
  width: 40px;
  height: 40px;
  position: relative;
  animation: loading38-eff 1s steps(8) both infinite; /*steps函數(shù)*/
}
.load-span38{
  width: 6px;
  height: 6px;
  display: block;
  border-radius: 3px;
  position: absolute;
  left: 17px;
  top: 0;
  transform-origin: 3px 20px; /*定義變形中心點(diǎn)*/
}
.load-span38:nth-of-type(1){
  transform: rotate(var(--r-num));
  background: #2FACFD;
}
.load-span38:nth-of-type(2){
  transform: rotate(calc(var(--r-num)*2));
  background: #33B4FD;
}
.load-span38:nth-of-type(3){
  transform: rotate(calc(var(--r-num)*3));
  background: #38BEFE;
}
.load-span38:nth-of-type(4){
  transform: rotate(calc(var(--r-num)*4));
  background: #3ECAFE;
}
.load-span38:nth-of-type(5){
  transform: rotate(calc(var(--r-num)*5));
  background: #45D7FE;
}
.load-span38:nth-of-type(6){
  transform: rotate(calc(var(--r-num)*6));
  background: #4BE4FE;
}
.load-span38:nth-of-type(7){
  transform: rotate(calc(var(--r-num)*7));
  background: #52F1FF;
}
.load-span38:nth-of-type(8){
  transform: rotate(calc(var(--r-num)*8));
  background: #57FBFF;
}
@keyframes loading38-eff{
  to {
    transform: rotate(0deg);
  }
  from {
    transform: rotate(-360deg);
  }
}

1、8個(gè) span 繪制8個(gè)圓點(diǎn)，分別寫上不同的背景色

2、通過 transform-origin 屬性來(lái)定義變形的中心點(diǎn)，然后給每個(gè)圓點(diǎn)計(jì)算角度變形（這里我定義的角度值為（360°/8 = 45°）），注意這里的每次變形是基于上一個(gè)圓點(diǎn)的角度 +45deg

3、最后給整體加上 animation 動(dòng)畫，并設(shè)置時(shí)間函數(shù) steps() 為8，意思是分8次整體旋轉(zhuǎn)完成 360deg

完整代碼如下

html 頁(yè)面

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <title>漸變加載條</title>
  </head>
  <body>
    <div class="app">
      <div class="loading38">
        <span class="load-span38"></span>
        <span class="load-span38"></span>
        <span class="load-span38"></span>
        <span class="load-span38"></span>
        <span class="load-span38"></span>
        <span class="load-span38"></span>
        <span class="load-span38"></span>
        <span class="load-span38"></span>
      </div>
    </div>
  </body>
</html>

css 樣式

/** style.css **/
.app{
  width: 100%;
  height: 100vh;
  background-color: #ffffff;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.loading38 {
  --r-num: 45deg; /*定義角度值*/
  width: 40px;
  height: 40px;
  position: relative;
  animation: loading38-eff 1s steps(8) both infinite;
}
.load-span38{
  width: 6px;
  height: 6px;
  display: block;
  border-radius: 3px;
  position: absolute;
  left: 17px;
  top: 0;
  transform-origin: 3px 20px;
}
.load-span38:nth-of-type(1){
  transform: rotate(var(--r-num));
  background: #2FACFD;
}
.load-span38:nth-of-type(2){
  transform: rotate(calc(var(--r-num)*2));
  background: #33B4FD;
}
.load-span38:nth-of-type(3){
  transform: rotate(calc(var(--r-num)*3));
  background: #38BEFE;
}
.load-span38:nth-of-type(4){
  transform: rotate(calc(var(--r-num)*4));
  background: #3ECAFE;
}
.load-span38:nth-of-type(5){
  transform: rotate(calc(var(--r-num)*5));
  background: #45D7FE;
}
.load-span38:nth-of-type(6){
  transform: rotate(calc(var(--r-num)*6));
  background: #4BE4FE;
}
.load-span38:nth-of-type(7){
  transform: rotate(calc(var(--r-num)*7));
  background: #52F1FF;
}
.load-span38:nth-of-type(8){
  transform: rotate(calc(var(--r-num)*8));
  background: #57FBFF;
}
@keyframes loading38-eff{
  to {
    transform: rotate(0deg);
  }
  from {
    transform: rotate(-360deg);
  }
}