纯CSS无法实现真正液态流动效果，仅能通过伪元素变形+渐变位移制造视觉错觉；真实物理模拟需Canvas（像素扰动）或WebGL（反射/粘滞/折射）。
纯 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+ 可跑，但逐帧计算成本高，别在大图或高频动画里滥用。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 务必先检查图片跨域：设置
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 的学习成本和兼容性妥协。
