HTML液态流动动画效果实现

在开始之前，先说结论：纯CSS无法实现真正意义上的液态流动效果。它没有物理模拟、没有像素级扰动、也没有折射或粘滞的反馈。网页上常见的“液态”动效，要么是视觉错觉——比如借助伪元素变形和渐变位移来制造假象，要么就必须进入Canvas或WebGL的领域。

但根据不同场景选择最合适的方案，才是关键所在。下面逐一拆解。

用 ::before + transform 模拟液态覆盖（按钮/卡片悬停）

这是最轻量、兼容性最好、也最容易上手的方案，特别适合按钮水波漫过、卡片浸润这类交互反馈。实现时需遵循几条核心原则：

• 伪元素尺寸必须足够大。例如 width: 200%、left: -150%，否则位移时容易露白边或断层。
• 关键帧里不能只靠 translateX 单调移动，必须混入 skewY 或小幅 rotate，否则看起来像滑块滑动，而非液体流动。
• overflow: hidden 必须加在父容器上，且父容器需设置 position: relative，否则伪元素定位失效。
• 动画时间建议设定在 0.8s～1.2s。太快像弹跳，太慢会失去“流动感”。

用 linear-gradient + background-position 做横向水流光效

这条路线更适合背景层、加载条、状态指示器等长条形区域。性能好、写法极简，但局限在于只支持单向平滑位移。

• 渐变色推荐使用至少三种色标，例如：linear-gradient(90deg, #00c9ff, #92fe9d, #00c9ff)，避免两色过渡生硬。
• animation 的 duration 和 easing 非常关键。用 cubic-bezier(0.34, 1.56, 0.64, 1) 比 linear 更接近流体惯性。
• 移动端注意：background-attachment: fixed 不生效，切勿依赖视差效果。改用 will-change: background-position 提前触发合成层更可靠。
• 若要实现循环无缝，@keyframes 的 0% 和 100% 背景位置必须严格对齐。例如 0% { background-position: -200% 0; } 到 100% { background-position: 0 0; }。

Canvas 实现基础液体晃动（静态图/头像波纹）

当需要真实像素扰动效果时，Canvas 是底线选择。它不依赖GPU，IE9+即可运行，但逐帧计算成本较高，不宜在大图或高频动画中过度使用。

• 务必先检查图片跨域问题：设置好 img.crossOrigin = "anonymous"，否则 ctx.getImageData() 会报错 SecurityError。
• 偏移量计算别用整数加减，要用带频率和振幅控制的表达式，比如 Math.sin(time * 0.002 + y * 0.01) * 8，否则抖动会僵硬。
• 切勿直接用 putImageData() 输出——锯齿感会很严重。正确做法是：先将扰动后的像素画到离屏canvas，再用 drawImage() 合成，利用浏览器双线性插值平滑。
• requestAnimationFrame 的 time 参数单位是毫秒，记得除以1000再传给三角函数，否则波动频率会快至失真。

WebGL 着色器才是真液态（反射/多层/粘滞）

如果需要可拖拽的粘稠液体、带折射的水洼，或实时响应鼠标扰动的流体场，Canvas便力不从心。此时必须借助WebGL加GLSL着色器。

• 位移向量必须归一化UV：用 vec2 uv = vUv; uv = uv * 2.0 - 1.0; 再输入噪声函数，否则位移会随分辨率不同而爆炸式变化。
• 移动端Android部分中低端GPU（如Mali-400）不支持fragment shader中的 sin()/cos() 函数。需预计算查表，或改用 fract(12.9898 * uv.x + 78.233 * uv.y) 这类简易噪声。
• 要模拟粘滞拖尾效果？在shader里缓存上一帧输出，做 mix(prevTex, currTex, 0.9)。系数越接近1，视觉上越“黏”。
• 别漏掉 precision highp float 声明。iOS Safari默认为 mediump，噪声细节会全部糊掉。

说到底，真正难的从来不是写出第一个液态动画，而是判断到底该用哪一层：按钮悬停用伪元素，背景流动用渐变，头像波纹用Canvas，而物理级流体交互——必须接受WebGL的学习成本和兼容性妥协。