CSS中不存在acid滤镜，所谓“酸性效果”需通过hue-rotate()、saturate()、contrast()动态组合+transform扭曲+mask溶解实现，核心是±10deg色相抖动、2.0–2.5饱和度及局部液态形变。
acid滤镜在CSS里根本不存在
HTML5本身不提供“酸性风格”（acid style）这种预设滤镜，CSS的 filter 属性也没有叫 acid() 或类似名称的函数。所谓“酸性效果”，是多种基础滤镜叠加+动画+扭曲组合出来的视觉风格，核心是高饱和、强对比、液态流动感和轻微色偏——不是一键开关。
用filter模拟酸性色调的关键组合
真正起作用的是 hue-rotate()、saturate() 和 contrast() 的高频小幅度动态变化。静态写死一组值基本没酸味，必须配合 @keyframes：
img.acid {
filter: saturate(2.2) contrast(1.4) hue-rotate(-5deg);
animation: acid-pulse 8s infinite linear;
}
@keyframes acid-pulse {
0% { filter: saturate(2.0) contrast(1.3) hue-rotate(-8deg); }
25% { filter: saturate(2.5) contrast(1.6) hue-rotate(3deg); }
50% { filter: saturate(2.1) contrast(1.4) hue-rotate(-2deg); }
100% { filter: saturate(2.4) contrast(1.5) hue-rotate(6deg); }
}-
hue-rotate()建议控制在 ±10deg 内抖动，超过会变脏，不是酸是晕 -
saturate(2.0–2.5)是安全区间，再高容易溢色，尤其在Safari上丢细节 - 别加
brightness()—— 酸性风格靠对比度拉层次，不是靠提亮
要真有“液态感”，得靠transform和mask配合
CSS滤镜只能调色，没法做出波纹/熔化效果。必须引入形变：
- 用
transform: skewX(0.5deg) scaleY(1.02)配合错帧动画，模拟轻微扭曲 - 叠加 SVG
mask-image: radial-gradient(...)实现局部溶解边缘 - 注意：Chrome 115+ 支持
mask-border，但 Safari 仍需 -webkit- 前缀，且 mask 动画性能差，建议只对小图层启用
移动端酸性效果容易翻车的三个点
在iOS或安卓WebView里，酸性风格常直接变卡顿或失色：
立即学习“前端免费学习笔记（深入）”；
- 避免同时运行 >2 个
filter动画 +transform动画，iOS Safari 会降帧甚至停帧 -
will-change: filter在部分安卓机型上反而触发渲染bug，不如用transform: translateZ(0)强制GPU加速更稳 - 某些低端机不支持
hue-rotate()小数参数（如hue-rotate(0.7deg)），请统一用整数度数
酸性风格的本质是“可控失控”，所有参数都要在临界点附近试探——调得太稳就死板，太疯就糊成一片。动手前先在 CodePen 上用 devtools 实时拖动 filter 滑块，比抄整段代码更有用。
