CSS液体加载动画
前言
不走寻常路，论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); } } 复制代码总结： CSS变量的使用 var(--xx) ，配合 animation-delay 以及 calc 计算属性就是液体加载动画实现的核心思路，而滤镜的使用也是凸显流体美感的重要组成部分~
作者：动画百晓生
链接：https://juejin.cn/post/7004496282907574279