CSS 液态变形效果（gooey）
样式所有处理都在浏览器本地完成，数据不上传服务器
实时预览改上面的参数，这里立刻跟着变
CSS 代码
看着玄，做法只有两步：先给容器加较大半径的模糊，再把对比度拉到很高。高对比度会把模糊出来的灰度渐变「压」成硬边 —— 于是两块原本分开的图形在靠近时，中间那层模糊被压成一条连桥，看起来就像两滴液体合并。 所以它是作用在「容器」上的效果，两个前提缺一不可：一是子元素要足够实心（半透明或过浅的颜色压出来的边会断），二是容器不能设 `overflow: hidden`（连桥会被裁掉，效果直接消失）。这两条都写进了交付代码的注释里。 预览里放了两个移动的圆，而不是一个静止的：单看一个圆根本看不出「液态」—— 必须有两个以上元素靠近并把连桥拉出来。所以预览让它们缓慢靠近又分开，连桥随之出现与消失。这也提示了实际用法：这个效果要用在一组会谈合的元素上（加载指示器、合并的标签、粒子），而不是单个元素。
功能
- 模糊与对比度分开调 —— 两者的配比决定边的连续程度
- 单个元素尺寸可调（子元素尺寸由它继承）
- 移动速度可调，方便观察连桥的出现与消失
- 预览里两个圆缓慢靠近又分开，连桥随之出现
- 交付的代码含容器与子元素两部分，并标明了两个前提
- 容器用 `filter`，子元素用 `background: currentColor` —— 换色只改一处
- 自动附上 `prefers-reduced-motion` 的处理
- 下方代码带语法着色，复制按钮一步拿走
- 所有计算在浏览器本地完成
使用方法
- 先调模糊半径：越大连桥越粗，但形状本身也会越糊
- 再调对比度：它决定「压边」的硬度，低了边会断成虚线
- 调元素尺寸与移动速度，看连桥什么时候出现、什么时候断开
- 复制 CSS —— 注意容器上不要加 `overflow: hidden`
常见问题
- 容器为什么不能设 `overflow: hidden`？
- 因为连桥恰恰是溢出的那部分。模糊让图形向外扩了一圈，高对比度把那一圈压成了实边 —— 其中元素之间那部分就是连桥。设了 `overflow: hidden` 之后，溢出的部分被裁掉，连桥被切在容器边界上，看起来就像两块被硬生生切开的色块。这是这个效果最常见的失败原因，而且现象很直观：效果「变方了」。
- 为什么子元素必须是实心色？
- 因为「压边」靠的是模糊后的灰度差。半透明或很浅的颜色模糊之后，相邻区域的灰度差本就很小，高对比度放大这个差值时，压出来的边会断断续续，看起来像虚线或噪点。深色且饱和度高的实色在模糊后仍有明显的灰度梯度，压出来的边才连续。交付的代码里用 `background: currentColor` 就是为了让子元素能继承一个实色。
- 这个效果有性能代价吗？
- 有，而且不小。 容器上的 `filter` 意味着浏览器要把整个容器（含所有子元素）先渲染到一张离屏图层，再做模糊与对比度，最后合成回来 —— 而内部元素一旦移动，这张图层就整个重做一遍。所以：别把它用在大面积或元素很多的容器上，别让容器本身跟着滚动，也别在容器内放复杂的子内容。它适合小而集中的一组元素。
- 可以用在文字上吗？
- 可以，但要注意文字也会被模糊再压回，结果是笔画变粗、细节丢失、细字直接糊成一团。所以只适合大号、笔画粗的标题，且对比度要调得比图形低一些（否则笔画会粘在一起）。另外文字需要放在子元素里（容器本身不能是文字），否则文字会连同容器一起被压。
相关工具
毛玻璃效果生成器
样式调模糊、透明度、饱和度与边框，实时预览毛玻璃效果并复制 CSS。代码含 -webkit- 前缀，iOS 上也能真的出现模糊。
CSS 关键帧动画模板
样式七套预设关键帧动画（淡入、滑入、弹出、脉动、抖动、旋转、浮动），调时长与曲线后复制 CSS，并附减少动态效果的处理。
CSS 圆角生成器
样式调四个角的圆角值，实时预览并复制 CSS。支持 px、rem 与百分比 —— 百分比在非正方形盒子上是椭圆，预览区里一眼就能看出来。
CSS 渐变生成器
样式调角度、颜色与形状，实时预览渐变效果，一键复制 CSS。支持线性、径向与锥形三种渐变，可选中间色标。
新拟态效果生成器
样式调距离、模糊、强度与凹凸方向，实时预览新拟态（柔和 UI）效果并复制 CSS。两个阴影色由底色算出，色相保持不变。
霓虹灯文字
样式调颜色与强度，实时预览霓虹灯文字效果并复制 CSS。多层 text-shadow 叠出光晕，预览区配深色底。