blur和contrast滤镜必须分层使用：小球仅加blur(4–6px)，容器统一加contrast(8–12)；二者叠加才能实现液态粘连效果，同元素叠加会相互抵消。
blur 和 contrast 滤镜必须成对使用，单独用没效果
只给小球加 filter: blur(5px)，它只会变糊、边缘发虚，根本看不出“粘连”；只给容器加 filter: contrast(10)，则整个内容会变生硬、发白，甚至文字失真。真正起作用的是两者的**叠加关系**：模糊制造“可融合的软边”，高对比度把模糊交界处强行“收紧”，视觉上就产生了液态拉丝感。
常见错误是把两个滤镜都加在同一个元素上——比如同时写 .ball { filter: blur(5px) contrast(10); }，这会导致模糊被对比度反向抵消，融合感消失。正确做法是：小球自身只模糊，外层容器统一提对比度。
- 小球元素（
.dot、.smallball）必须设filter: blur(5px)，且不能有contrast - 包裹它们的父容器（
.gooey-container、.effect）必须设filter: contrast(10)，且不能模糊 - 容器背景建议用纯色（如
white或#fff），渐变或透明背景会让对比度失效
blur 值太小或 contrast 值太低，融合感直接消失
模糊值不是越大越好：blur(2px) 不够软，交界处还是硬边；blur(15px) 又太散，球体轮廓崩坏，动画一动就糊成一团。实测 blur(4px)~6px 是安全区间。
对比度同理：contrast(5) 勉强可见粘连但不明显；contrast(20) 容易过曝、细节丢失；contrast(8)~12 最稳。不同浏览器渲染略有差异，Chrome 通常比 Safari 更“吃”对比度，上线前务必在 Safari 中检查是否仍能看清融合边界。
- 推荐起手参数组合：
blur(5px)+contrast(10) - 如果球体太小（
width: 20px），可微调为blur(4px)+contrast(12)防止糊掉 - 不要用百分比单位写
contrast，必须用无单位数值（contrast(10)✅，contrast(1000%)❌）
动画过程中小球重叠区域必须动态变化，否则只是静态粘连
静态放两个模糊球在高对比容器里，顶多算“碰在一起”，不是“融合动画”。关键在 @keyframes 要让两个球产生**位置偏移 + 尺寸形变**的配合：
- 用
transform: translateX()控制水平靠近/远离，制造碰撞节奏 - 在重叠瞬间（如
50%关键帧），同步缩窄宽度、拉高高度（width: 50px; height: 70px;），模拟液体被挤压延展 - 避免只动一个球——双球错开延迟动画（如
animation-delay: -1s）能让融合更自然 - 别用
left/top百分比定位做动画，容易因容器尺寸变化导致偏移错位；优先用transform
移动端 Safari 兼容性差，blur 值需降级处理
iOS 16+ 的 Safari 对 filter: blur() 渲染性能极差，尤其多个模糊元素叠加时，动画直接掉帧。这不是 bug，是 WebKit 的硬件加速限制。
解决方案不是放弃效果，而是分层降级：
- 检测 Safari：
@supports (-webkit-filter: blur(1px)) and (not (filter: blur(1px))) - 对 Safari 单独设更低的模糊值：
.dot { -webkit-filter: blur(3px); filter: blur(5px); } - 或干脆禁用模糊，改用
box-shadow: 0 0 20px rgba(0,0,0,0.3)模拟软边（牺牲精度，保流畅） - 绝对不要在 iOS 上尝试
blur(10px)+contrast(20)组合，页面可能卡死
真正难的不是写出融合效果，而是让融合在各种设备上都稳定不糊、不卡、不闪——blur 和 contrast 的数值，永远得跟着真实机型调，而不是照着教程抄。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
