acid滤镜不存在，酸性风格需hue-rotate()、saturate()、contrast()高频抖动+动画控制，配合形变与遮罩，并依赖深色基底。
acid 滤镜在 CSS 里根本不存在，别再搜 filter: acid() 了——它不会生效，浏览器直接忽略。
真正能做出酸性风格的，是 hue-rotate()、saturate()、contrast() 这三个滤镜的高频小幅抖动 + 动画节奏控制，再配合形变和遮罩。静态写死一组值，连“酸味”都闻不到。
为什么直接写 filter: saturate(2.5) hue-rotate(10deg) 没酸感？
因为酸性风格本质是「可控失控」：色相在 ±8deg 内呼吸式偏移、饱和度在 2.0–2.4 之间脉动、对比度每 0.3s 微调一次——人眼识别的是「变化趋势」，不是单帧数值。
- 动画周期建议设为
6–9s，太短像闪屏，太长像卡顿 - 关键帧至少 4 个点（0%、25%、50%、100%），避免线性插值导致过渡生硬
- 别用
ease-in-out，改用linear或自定义贝塞尔曲线（如cubic-bezier(0.3,0.8,0.5,1)）更贴合液态节奏 -
hue-rotate()小数度数（如0.7deg）在 iOS Safari 上可能被截断为0deg，统一用整数
移动端酸性动画卡顿/失色的三个硬坑
iOS 和部分安卓 WebView 对多层 filter + transform 动画极度敏感，不是代码写得不够炫，是渲染管线扛不住。
- 同一时间只对 **1 个 DOM 元素**启用完整酸性动画；其他元素用静态
filter模拟余韵 - 禁用
will-change: filter—— 它在某些安卓机型上反而触发降帧或白屏，改用transform: translateZ(0)更稳 - 避免在
:hover或@media (prefers-reduced-motion)下自动启停动画，Safari 会丢帧；检测到动效偏好关闭时，直接 fallback 到静态高饱和样式
要“液态感”，光靠 filter 是假酸
CSS filter 只能调色，不能扭曲形状。所谓熔化、波纹、溶解边缘，必须靠另外两招配合：
- 用
transform: skewX(0.3deg) scaleY(1.01)配合错帧动画（比如相邻元素 delay 差 0.1s），模拟轻微不规则形变 - 局部溶解用
mask-image: radial-gradient(circle at 30% 40%, transparent 0%, black 60%)，注意 Safari 必须加-webkit-mask-image - 别给大图层（如全屏
section）加 mask 动画——性能崩得快，优先用在图标、按钮、小卡片等可控区域
酸性风格最易被忽略的一点：它依赖黑灰基底。没有足够深的背景（#0a0a0a 或更暗），高饱和色一出来就发灰、发脏，再抖也抖不出酸劲。调参数前，先确认你的 body 背景色是不是真够黑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
