CSS3 几步即可实现loading动画效果

╰半夏微凉° 2022-07-16 06:07 256阅读 0赞

## 例子1：菊花状的Loading效果 ##

**１.第一步画出静态的小菊花。**  
![先画一个圆][20161008175734359]

sk-fading-circle {
      width: 40px;
      height: 40px;
      position: relative;
    }
    .sk-fading-circle .sk-circle {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
    }
    .sk-fading-circle .sk-circle:before {
      content: '';
      display: block;
      margin: 0 auto;
      width: 15%;
      height: 15%;
      background-color: #333;
      border-radius: 100%;
    }
    
    <div class="sk-fading-circle">
      <div class="sk-circle"></div>
      … //为缩减篇幅省略中间10个div
      <div class="sk-circle"></div>
    </div>

静态小菊花其实是一个外层div里嵌套12个小div。小div通过 border-radius画成圆型，并通过margin: 0 auto;定位到顶格居中位置。由于12个小div都是absolute定位，因此都重叠在了一起。

**2.第二步将12个重叠的圆分散开。**

![将圆点分开][20161008180020204]

.sk-fading-circle .sk-circle2 { transform: rotate(30deg);}
    .sk-fading-circle .sk-circle3 { transform: rotate(60deg);}
    … //节省篇幅，每个圆每隔30度递增旋转
    .sk-fading-circle .sk-circle12 { transform: rotate(330deg);}
    
    <div class="sk-fading-circle">
      <div class="sk-circle1 sk-circle"></div>
      … //为缩减篇幅省略中间10个div
      <div class="sk-circle12sk-circle"></div>
    </div>

用transform的rotate将各个圆点旋转，形成完整的菊花状。如果你对transform不熟的话，看下图，第二个圆点旋转30度的示意图，其余圆点的旋转自行脑补：  
　![旋转][20161008180234113]

**3.三步通过animation控制opacity属性，让每个点淡进淡出**

![使用opacity属性][opacity]

@-webkit-keyframes sk-circleFadeDelay {
      0%, 39%, 100% { opacity: 0; }
      40% { opacity: 1; }
    }
    @keyframes sk-circleFadeDelay {
      0%, 39%, 100% { opacity: 0; }
      40% { opacity: 1; } 
    }
    .sk-fading-circle .sk-circle:before { …… animation: sk-circleFadeDelay 1.2s infinite ease-in-out both; }

这样每个点都在像信号灯一样同步地闪烁。

**4.最后一步，给每个点设置animation-delay延时，以错开闪烁的时间，形成常见的菊花转转的效果**

.sk-fading-circle .sk-circle2:before {animation-delay: -1.1s; }
    .sk-fading-circle .sk-circle3:before { animation-delay: -1s; }
    .sk-fading-circle .sk-circle4:before { animation-delay: -0.9s; }
    … //为缩减篇幅省略中间代码
    .sk-fading-circle .sk-circle12:before { animation-delay: -0.1s; }

因为是12个圆点，每个圆点的闪烁间隔时间0.1s，因此第1个圆点没有animation-delay延时，立即闪烁。第二个圆点，从-1.1s开始闪烁（负数不理解的话，参考animation一文，意思是从该时间点开始启动，之前的动画效果不显示）。之后每个圆点均以0.1s递增的速度延迟。最终形成常见的菊花转转的Loading效果  
　　  
　　![结果][20161008180517460]

--------------------

## 例子2：ios版菊花Loading ##

明白了原理后，无非是在例子1的基础上，将圆点改成竖条，opacity半透明即可。

--------------------

## 例子3：琴谱版Loading ##

**1.第一步，画出静态琴谱，很简单无非是一个外层div，内嵌几个并排的div而已。**

.spinner {
      height: 40px;
    }
    .spinner > div {
      background-color: #333;
      height: 100%;
      width: 6px;
      display: inline-block;
    }
    
    <div class="spinner">
      <div></div>
      … //你可以根据需求多加几个div
      <div></div>
    </div>

**2.第二步，琴谱动起来**

![琴谱][20161008181148655]

.spinner > div { …… animation: sk-stretchdelay 1.2s infinite ease-in-out; }
    @keyframes sk-stretchdelay {
      0%, 40%, 100% { transform: scaleY(0.4); }  
      20% { transform: scaleY(1.0); }
    }

例1,2中用了transform的rotate实现旋转。例3用了transform的scaleY实现拉伸  
　　  
**3.最后一步，设置延时，让每个琴键在不同时间内拉伸。**

![琴谱][20161008181308376]

.spinner .rect2 {  animation-delay: -1.1s; }
    .spinner .rect3 { animation-delay: -1.0s; }
    .spinner .rect4 { animation-delay: -0.9s; }
    .spinner .rect5 { animation-delay: -0.8s; }
    
    <div class="spinner">
      <div class="rect1"></div>
      … //为节省篇幅省略中间代码
      <div class="rect5"></div>
    </div>

每个琴键的拉伸间隔时间0.1s，因此第1个琴键没有animation-delay延时，立即拉伸。第二个琴键，从-1.1s开始闪烁。之后每个琴键均以0.1s递增的速度拉伸。和菊花Loading的原理是一样的，不赘述。

--------------------

[20161008175734359]: /images/20220716/6487a1e5e6c64dfb909494a908dfd8b6.png
[20161008180020204]: /images/20220716/8d11e3f31bde42beb681287f0bf547e8.png
[20161008180234113]: /images/20220716/e1f977227b974f0c86b7041d401f39b6.png
[opacity]: /images/20220716/75aa59d695e849fa941b235658ce7ff9.png
[20161008180517460]: /images/20220716/836408f118fc4e9ebdde06e2d3250e52.png
[20161008181148655]: /images/20220716/bf2cacc8106b42b4a046b1ce4a5d62d8.png
[20161008181308376]: /images/20220716/b93c374668d6491aaf43b39c6f71641e.png