加载动画模版：流体

效果展示

<div class="conatiner">
  <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>
</div>

.conatiner {
  width: 100%;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.conatiner svg {
  width: 0;
  height: 0;
}

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

.conatiner .loading span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  animation: loading 4s ease-in-out infinite;
  animation-delay: calc(0.2s * var(--i));
}

.conatiner .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);
  }
}

代码解析

HTML 结构

这个加载动画的 HTML 结构包含三个主要部分：

1. 容器元素 (div.conatiner)：作为整个加载动画的外层容器，提供居中对齐的布局环境。
2. 加载动画元素 (div.loading)：包含多个用于动画效果的子元素，每个子元素都通过 CSS 变量--i分配了不同的动画延迟时间。
3. SVG 滤镜定义 (svg#gooey)：定义了用于创建液体流动效果的滤镜，这是实现特殊视觉效果的关键部分。

SVG 滤镜使用了两个核心组件：feGaussianBlur（高斯模糊）和feColorMatrix（颜色矩阵），通过组合这两个滤镜创建出了粘连效果，使动画看起来更具流动性。

CSS 实现原理

1. 布局设置：容器使用 flex 布局实现内容居中对齐，SVG 元素被设置为不可见（宽高为 0）。
2. 粘性流体效果：通过filter: url(#gooey)将 SVG 定义的流体效果应用到加载动画元素上。
3. 动画实现：
   • 使用@keyframes loading定义了旋转动画
   • 通过 CSS 变量--i为每个小圆点设置不同的动画延迟时间
   • 小圆点通过::before伪元素创建，并应用渐变色和阴影效果
4. 视觉增强：使用渐变色背景、阴影效果和 CSS 变量实现了灵活且具有视觉吸引力的加载动画效果。

使用方法

1. 复制 HTML 结构：将 HTML 代码块中的加载动画容器和 SVG 滤镜部分复制到你的网页中。
2. 添加 CSS 样式：将 CSS 代码块中的样式规则复制到你的样式表中。
3. 调整容器尺寸：根据需要修改.conatiner类的width和height属性来适应你的页面布局。
4. 自定义视觉效果：可以通过修改颜色渐变、阴影、小圆点大小等参数来自定义加载动画的外观。

浏览器兼容性

• 主流浏览器：此加载动画效果在 Chrome、Firefox、Safari 和 Edge 等现代浏览器中具有良好的兼容性。
• IE 浏览器：由于使用了 SVG 滤镜和 CSS 变量等较新的 CSS 特性，在 Internet Explorer 中可能无法正常显示或需要额外的兼容性处理。
• 性能考虑：SVG 滤镜可能会在某些移动设备上影响性能，如果在移动端使用，建议进行性能测试和优化。

参考

CSS 液体加载动画