HTML5无内置液体流动滤镜，需用Canvas逐帧像素偏移实现基础晃动，或WebGL+GLSL着色器通过噪声函数生成动态位移场；SVG滤镜因兼容性差、性能低且难调出液体感而不推荐。
HTML5 本身没有内置的“液体流动滤镜”——filter CSS 属性支持的 blur()、contrast()、hue-rotate() 等函数都无法模拟流体形变或波纹扰动效果。真要实现类似液体晃动、水波扩散、黏稠拖曳的视觉效果，必须绕过纯 CSS 滤镜，转向 Canvas 或 WebGL 渲染。
用 Canvas 实现基础液体晃动效果
核心思路是：用 canvas.getContext('2d') 绘制图像，再通过逐帧偏移像素（如正弦扰动）模拟表面波动。适合静态图或简单动效，性能可控，兼容性好（IE9+）。
- 先用
ctx.getImageData()读取原始像素，避免跨域限制（确保图片同源或已设置crossOrigin="anonymous"） - 对每个像素的 x/y 坐标叠加一个随时间变化的偏移量，例如：
dx = Math.sin(y * 0.02 + time) * 10 - 用双线性插值采样原图像素，避免锯齿；直接写
putImageData()会丢失抗锯齿，建议用drawImage()渲染到另一 canvas 再合成 - 动画用
requestAnimationFrame驱动，time变量每帧递增，控制波动频率和方向
用 WebGL + GLSL 实现高性能液体扭曲
需要真实流体物理感（如粘滞、反射、折射、多层混合）时，Canvas 逐像素计算太慢，必须上 WebGL。本质是把图像作为纹理传入着色器，在 fragment shader 中用噪声函数（如 sin(cos()) 复合）生成动态位移场。
- 关键着色器变量：用
uniform float u_time接收时间，uniform sampler2D u_texture接收原图 - 位移向量常由 2D 噪声（如
vec2 noise = vec2(snoise(vec3(uv * 2.0, u_time)), snoise(vec3(uv * 2.0 + 1.0, u_time)))）驱动 - 注意 UV 坐标归一化（0–1 范围），否则位移会溢出；用
mod()或fract()包裹可实现无缝循环 - 移动端需测试
highp精度支持，部分 Android GPU 不支持sin()/cos()在 fragment shader 中——得降级为查表或简化公式
别误用 CSS filter: url(#svg-filter)
有人试图用 SVG filter: url(#myFilter) 应用，这确实能做出波纹，但实际问题很多：
立即学习“前端免费学习笔记（深入）”；
-
baseFrequency和numOctaves很难调出“液体”感，容易变成云纹或大理石纹 - Chrome 对 SVG 滤镜动画支持差，
animate标签在filter内部基本不触发重绘 - 滤镜作用于整个元素盒模型，无法单独扰动图像内容而不影响文字、边框等其他子元素
- 性能比 Canvas 还低，尤其在滚动或缩放时，浏览器常直接禁用该滤镜
真正做液体流动，得接受它不是“加个 filter 就行”的事——Canvas 提供可控基线，WebGL 提供上限，而 SVG 滤镜只是个看着像、跑不稳的幻觉。噪声函数的参数微调、UV 偏移的归一化边界、以及移动端 shader 精度 fallback，才是卡住进度的关键点。
