同标题，怎么搞，死活搞不定
2 个赞
网页版液态玻璃和沉浸光感怎么实现？ @grokbot
网页版"液态玻璃 + 沉浸光感"的实现，本质上是三层技术的叠加：
- 毛玻璃基底 ——
backdrop-filter做模糊与提饱和 - 边缘折射 —— SVG
feDisplacementMap让背景在玻璃边缘产生"液态"扭曲 - 光感层 —— 高光描边、跟随指针的径向光源、环境动态背景 + 噪点
下面按层拆解，代码可以直接抄。
一、毛玻璃基底（最基础的一层）
.glass {
position: relative;
border-radius: 24px;
/* 半透明底色：模糊区域必须有一点点底色，否则 blur 效果发虚 */
background: rgba(255, 255, 255, 0.12);
/* 核心：模糊 + 饱和度增强（saturate 让玻璃后面的颜色更"透亮"） */
-webkit-backdrop-filter: blur(20px) saturate(180%);
backdrop-filter: blur(20px) saturate(180%);
/* 1px 内描边模拟玻璃厚度 */
border: 1px solid rgba(255, 255, 255, 0.22);
/* 外阴影 + 顶部高光，缺一个都不像玻璃 */
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.18),
inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
saturate(180%)是液态玻璃"通透感"的关键，别只写blur()。
二、边缘折射 —— "液态"的灵魂
纯 blur 只是毛玻璃（glassmorphism），真正的 Liquid Glass 特征是边缘像透镜一样扭曲背景。这个只能靠 SVG 滤镜做位移，然后喂给 backdrop-filter：
<svg width="0" height="0" style="position:absolute">
<filter id="liquid" x="-25%" y="-25%" width="150%" height="150%"
color-interpolation-filters="sRGB">
<!-- 噪声场：决定扭曲方向 -->
<feTurbulence type="fractalNoise"
baseFrequency="0.008 0.012"
numOctaves="2" seed="7" result="noise"/>
<!-- 稍微平滑一下，避免扭曲过硬 -->
<feGaussianBlur in="noise" stdDeviation="3" result="smooth"/>
<!-- 位移：scale 控制扭曲强度 -->
<feDisplacementMap in="SourceGraphic" in2="smooth"
scale="40"
xChannelSelector="R" yChannelSelector="G"/>
</filter>
</svg>
.liquid {
backdrop-filter: url(#liquid) blur(12px) saturate(180%);
-webkit-backdrop-filter: blur(12px) saturate(180%); /* Safari 降级 */
}
想让扭曲只出现在边缘（中间保持清晰），用一张径向渐变图作为 displacement map 的输入：中心是灰色（不位移），边缘是红/绿（强位移），这样得到的就是"边缘透镜、中心通透"的真·液态玻璃。
兼容性要坦白说：
backdrop-filter里带url(#...)目前在 Chrome / Edge / Firefox 上可用，Safari 基本不支持（-webkit-backdrop-filter只吃函数列表）。所以务必做@supports分支，Safari 用户看到的是纯毛玻璃版，效果略降但不至于破版。
三、光感层 —— 高光、光源、噪点
1. 跟随指径的高光（沉浸感的主力）
.glass::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
background: radial-gradient(
240px circle at var(--mx, 50%) var(--my, 0%),
rgba(255, 255, 255, 0.35),
transparent 65%
);
}
el.addEventListener('pointermove', e => {
const r = el.getBoundingClientRect();
el.style.setProperty('--mx', `${e.clientX - r.left}px`);
el.style.setProperty('--my', `${e.clientY - r.top}px`);
});
2. 环境动态背景（没有好看的背景，玻璃一定不好看）
液态玻璃是"环境依赖"的——背后必须有高饱和、有明暗变化的色块才有质感：
body {
background:
radial-gradient(600px at 20% 30%, #ff7a59, transparent 60%),
radial-gradient(700px at 80% 20%, #4f7cff, transparent 60%),
radial-gradient(600px at 50% 90%, #b44cff, transparent 60%),
#0b0f1c;
animation: drift 18s ease-in-out infinite alternate;
}
@keyframes drift {
to { background-position: 60px -40px, -50px 30px, 20px 60px; }
}
3. 噪点 / 颗粒（防止渐变出现 banding，也更像真实材质）
.grain::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
opacity: 0.05;
pointer-events: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
4. 多层景深
给不同层级的玻璃设不同的 blur 值（前景 blur(8px)、背景 blur(28px)）+ 不同透明度，空间感立刻出来。
四、性能与兼容（移动端尤其重要）
backdrop-filter是逐帧 GPU 合成，同屏超过 ~8–10 块玻璃就开始掉帧；列表页建议只给可见项挂载。- 不要动画化
blur()数值（如 hover 时从 20px 过渡到 30px），改用 transform/opacity 或直接切换类名。 - Safari 有 backdrop-filter 层数量上限，超了会直接不渲染，建议加
contain: paint;或isolation: isolate收敛合成层。 - 提供降级：
@supports not (backdrop-filter: blur(1px)) {
.glass { background: rgba(255,255,255,.75); }
}
- 尊重
prefers-reduced-motion，关掉背景漂移动画。
五、想省事的话
- 现成库：Liquid Glass（npm
liquid-glass）、glassmorphism生成器，能自动生成 SVG 折射滤镜 + 对应 CSS。 - 参考实现：sharplab 的
liquidglass、Apple 官方 Liquid Glass 设计规范（SF Symbols / WWDC25 相关资料）里对"厚度感、折射率、高光角度"的描述很值得对照。
一句话总结：backdrop-filter 负责"透"，SVG feDisplacementMap 负责"液"，径向高光 + 动态渐变背景 + 噪点负责"光"。三者齐了，效果基本就稳了。如果你贴一下具体场景（导航栏 / 卡片 / 全屏面板），我可以给一份针对性更强的实现。
l站有玻璃topic/2891295/5，具体链接就不放了
1 个赞
Tailwind+BootStrap混合
1 个赞
1 个赞
到这里搜一下
hunt.now
插个眼