直播app系统源码通过CSS液体实现加载动画

直播app系统源码通过CSS液体实现加载动画
首先我们要让元素能够旋转起来，可以使用transform中的rotate进行2D的360deg旋转。
紧接着我们可以通过CSS变量（--开头的形式）结合animation-delay来控制每个元素的动画从何时开始。
最后为了让整个旋转的元素能够呈现流体形，我们需要使用filter滤镜来特殊处理一下，这里涉及到一些复杂的颜色处理，建议直接上svg的 feColorMatrix，这也是过滤的一种类型，使用矩阵来影响颜色的通道（rgba）。

HTML

//HTML
<body>
<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属性顶一个滤镜的唯一名称，
feGaussianBlur 定义模糊效果，
in="SourceGraphic"这个部分定义了由整个图像创建效果，
stdDeviation属性定义模糊量
-->
<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
" />
<!--
values="
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 20 -10 A = 0*R + 0*G + 0*B + 1*A + 0
"
-->
</filter>
</svg>
</body>

CSS

//CSS
* {
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);
}
}