漏斗过滤加载动画（Funnel Loader 液体下渗）

效果演示（真实可交互）

漏斗由入口、锥形斗身与细管嘴三段组成，蓝色液体从满到见底反复循环，液体中的白色颗粒随之沉底，管嘴下方三颗水滴错峰坠落，把”过滤筛选”的过程演得清清楚楚。蓝 / 紫 / 红三套配色。

完整代码

HTML 结构：

<div class="fu-funnel">
  <span class="fu-top"></span>                          <!-- 漏斗入口 -->
  <span class="fu-body">                                <!-- 锥形斗身 -->
    <span class="fu-liquid"></span>                     <!-- 液体 -->
    <span class="fu-float f1"></span>                   <!-- 漂浮颗粒 -->
    <span class="fu-float f2"></span>
  </span>
  <span class="fu-spout"></span>                        <!-- 管嘴 -->
</div>
<div class="fu-drops"><i></i><i></i><i></i></div>       <!-- 底部水滴 -->

CSS 核心：

/* 锥形斗身：clip-path 直接切出漏斗形状 */
.fu-body {
  position: relative; width: 128px; height: 96px;
  clip-path: polygon(0 0, 100% 0, 58% 100%, 42% 100%);
  background: #c9d2e8; overflow: hidden;
}

/* 液体：从满到只剩 22% 再瞬间回满，模拟下渗 */
.fu-liquid {
  position: absolute; left: 0; right: 0; bottom: 0; height: 100%;
  background: linear-gradient(180deg, #7ab8ff, #4f8cff);
  animation: fu-drain 2.6s ease-in-out infinite;
}
@keyframes fu-drain {
  0%   { height: 100%; }
  62%  { height: 22%; }   /* 液体见底 */
  78%  { height: 22%; }   /* 底部停顿一下 */
  100% { height: 100%; }  /* 瞬间回满，开始下一轮 */
}

/* 底部水滴：与液体下渗同周期，错峰坠落 */
.fu-drops i {
  width: 9px; height: 9px; border-radius: 50%; background: #4f8cff;
  opacity: 0; animation: fu-drop 2.6s ease-in infinite;
}
.fu-drops i:nth-child(2) { animation-delay: .47s; }
.fu-drops i:nth-child(3) { animation-delay: .88s; }
@keyframes fu-drop {
  0%   { transform: translateY(-8px) scale(.5); opacity: 0; }
  12%  { opacity: 1; }
  55%  { transform: translateY(26px) scale(.9); opacity: 0; }
  100% { transform: translateY(-8px) scale(.5); opacity: 0; }
}

参数说明

兼容性与性能

• 液体只动 height，在 clip-path 容器内裁剪，动画元素少、无布局扩散
• clip-path: polygon 兼容 Chrome 55+ / Firefox 3.5+ / Safari 9.1+ / Edge 79+，覆盖所有现代浏览器
• 兼容 Chrome / Firefox / Safari / Edge 最新版；移动端表现一致
• 全部动画实例不超过 8 个（液体、2 颗粒、3 水滴、入口高光），性能开销可忽略
• 适合数据筛选中、表格过滤、搜索匹配、导出处理等”排除杂质”语义的等待场景

常见问题

Q: 液体回满时为什么是”瞬跳”而不是倒流？ 这是刻意设计——真实过滤是单向的，瞬跳回满能表达”新一批数据又进来了”；若想倒流，把 keyframes 改成 height 从 22% 线性回到 100% 并加 ease-out 即可。

Q: 颗粒在液体见底后还在动，有点违和？ 把 fu-sink 的透明度关键帧与 fu-drain 对齐：颗粒在液体见底（62%）时同步 opacity: 0，就不会”浮空”了。

Q: 想要更立体的漏斗？ 给 .fu-body 加同形状的深色投影层（另一个 clip-path 的伪元素，向下偏移 4px），或给斗身加左明右暗的线性渐变模拟光照。

Q: 漏斗尖部液体颜色太深/太浅？ 液体是渐变填充，尖部自然更窄更浓；把渐变改为同一色相深浅差更小的两色（如 #5b8ff7 → #4f8cff），观感会更均匀。