CSS 世界之流体加载动画

使用 SVG 制作的流体加载动画

效果展示

实现思路

  • 第一步首先我们要让元素能够旋转起来，使用 transform 中的 rotate 进行 2D 的 360° 旋转
  • 第二步我们可以通过 CSS 变量（–开头的形式）结合 animation-delay 来控制每个元素的动画从何时开始
  • 最后为了让整个旋转的元素能够呈现流体形，我们需要使用 filter 滤镜来特殊处理一下

实现代码

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div class="loading">
  <span style="--i:1"></span>
  <span style="--i:2"></span>
  <span style="--i:3"></span>
  <span style="--i:4"></span>
  <span style="--i:5"></span>
  <span style="--i:6"></span>
  <span style="--i:7"></span>
</div>

<svg>
  <filter id="gooey">
    <feGaussianBlur in="SourceGraphic" stdDeviation="10" />
    <!-- feColorMatrix 用于彩色滤光片转换 -->
    <feColorMatrix
      values="
              1 0 0 0 0
              0 1 0 0 0
              0 0 1 0 0
              0 0 0 20 -10
    "
    />
  </filter>
</svg>

代码解释

filter元素 id 属性作为滤镜的唯一标识
feGaussianBlur 定义模糊效果，
in="SourceGraphic" 这个部分定义了由整个图像创建效果，
stdDeviation 属性定义模糊量

这里涉及到一些复杂的颜色处理，直接上 svg 的 feColorMatrix，这也是过滤的一种类型，使用矩阵来影响颜色的通道

矩阵计算 RGBA 自已每行的最终值，每个 RGBA 通道有自身的 RGBA 通道，最后一个值是一个乘数，最后 RGBA 的值从上向下

1
2
3
4
5
/* R G B A 1 */
   1 0 0 0 0 // R = 1*R + 0*G + 0*B + 0*A + 0
   0 1 0 0 0 // G = 0*R + 1*G + 0*B + 0*A + 0
   0 0 1 0 0 // B = 0*R + 0*G + 1*B + 0*A + 0
   0 0 0 1 0 // A = 0*R + 0*G + 0*B + 1*A + 0

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
* {
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  min-height: 100vh;
  overflow: hidden;
  justify-content: center;
  align-items: center;
  background: #010b10;
}

svg {
  width: 0;
  height: 0;
}

.loading {
  width: 200px;
  height: 200px;
  position: relative;
  filter: url(#gooey);
}

.loading span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  animation: loading 4s ease-in-out infinite;
  /* var函数用来插入css变量的值，css变量名称以--开头 */
  animation-delay: calc(0.2s * var(--i));
}

.loading span::before {
  content: "";
  position: absolute;
  top: 0;
  left: calc(50% - 20px);
  width: 40px;
  height: 40px;
  background: linear-gradient(#fce4ec, #03a9f4);
  border-radius: 50%;
  box-shadow: 0 0 30px #03a9f4;
}

@keyframes loading {
  0% {
    transform: rotate(0deg);
  }

  50%,
  100% {
    transform: rotate(360deg);
  }
}

参考

CSS 液体加载动画