先看效果图注经过验证除谷歌浏览器之外火狐、safari等均不支持此效果实现步骤先定义玻璃元素和液态滤镜!--玻璃容器-- div classglass-container !--使用液态滤镜-- div classglass-filter/div !--边沿效果-- div classglass-specular/div /div !--创建液态滤镜-- svg styledisplay: none filter height100% idlg-dist width100% x0% y0% !--生成噪声图案-- feTurbulence baseFrequency0.008 0.008 numOctaves2 resultnoise seed92 typefractalNoise/ !--模糊噪声-- feGaussianBlur innoise resultblurred stdDeviation2/ !--根据模糊噪声的处理结果形成扭曲效果-- feDisplacementMap inSourceGraphic in2blurred scale70 xChannelSelectorR yChannelSelectorG/ /filter /svg编写玻璃元素的样式以及应用液态滤镜.glass-container { position: fixed; overflow: hidden; box-shadow: 0 6px 6px rgba(0, 0, 0, 0.2), 0 0 20px rgba(0, 0, 0, 0.1); border-radius: 200px; width: 200px; height: 200px; background: rgba(255, 255, 255, 0.25); } .glass-filter { position: absolute; inset: 0; z-index: 0; backdrop-filter: blur(4px); filter: url(#lg-dist); /*创建独立渲染区防止影响容器中的内容*/ isolation: isolate; } .glass-specular { position: absolute; inset: 0; z-index: 2; border-radius: inherit; overflow: hidden; box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.75), inset 0 0 5px rgba(255, 255, 255, 0.75); }实现原理这样一个液态玻璃效果就实现了是不是非常简单现在来说下实现原理filter height100% idlg-dist width100% x0% y0% 作用定义一个 SVG 滤镜效果。 属性 idlg-dist滤镜的唯一标识符供 CSS 中通过 url(#lg-dist) 引用。 width100% 和 height100%滤镜作用区域为整个目标元素的宽高。 x0% 和 y0%定义滤镜区域相对于目标元素的位置左上角开始。feTurbulence baseFrequency0.008 0.008 numOctaves2 resultnoise seed92 typefractalNoise/ 作用生成分形噪声纹理作为后续扭曲效果的基础。 属性 typefractalNoise使用分形噪声算法生成纹理。 baseFrequency0.008 0.008控制噪声的颗粒密度值越小颗粒越大。 numOctaves2噪声叠加的层级数影响纹理复杂度。 resultnoise将该步骤的结果命名为 noise供后续滤镜操作引用。 seed92随机种子值确保每次生成相同的噪声图案。feGaussianBlur innoise resultblurred stdDeviation2/ 作用对前面生成的噪声进行模糊处理使其更柔和。 属性 innoise输入源为之前生成的 noise。 resultblurred将该步骤的结果命名为 blurred。 stdDeviation2高斯模糊的标准差数值越大模糊程度越高。feDisplacementMap inSourceGraphic in2blurred scale70 xChannelSelectorR yChannelSelectorG/ 作用根据 blurred 图像的颜色通道来偏移原始图像形成扭曲效果。 属性 inSourceGraphic主输入源为目标元素本身。 in2blurred第二输入源为模糊后的噪声图像。 scale70控制位移强度值越大扭曲越明显。 xChannelSelectorRX 方向上的位移由红色通道决定。 yChannelSelectorGY 方向上的位移由绿色通道决定。完整代码!DOCTYPE html html langen head meta charsetUTF-8 titleTitle/title /head style body { margin: 0; height: 100vh; background: url(引用自己的背景图) center no-repeat; background-size: 100% 100%; } .glass-container { position: fixed; overflow: hidden; box-shadow: 0 6px 6px rgba(0, 0, 0, 0.2), 0 0 20px rgba(0, 0, 0, 0.1); border-radius: 200px; width: 200px; height: 200px; background: rgba(255, 255, 255, 0.25); } .glass-filter { position: absolute; inset: 0; z-index: 0; backdrop-filter: blur(4px); filter: url(#lg-dist); /*创建独立渲染区防止影响容器中的内容*/ isolation: isolate; } .glass-specular { position: absolute; inset: 0; z-index: 2; border-radius: inherit; overflow: hidden; box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.75), inset 0 0 5px rgba(255, 255, 255, 0.75); } /style body !--玻璃容器-- div classglass-container !--使用液态滤镜-- div classglass-filter/div !--边沿效果-- div classglass-specular/div /div !--创建液态滤镜-- svg styledisplay: none filter height100% idlg-dist width100% x0% y0% !--生成噪声图案-- feTurbulence baseFrequency0.008 0.008 numOctaves2 resultnoise seed92 typefractalNoise/ !--模糊噪声-- feGaussianBlur innoise resultblurred stdDeviation2/ !--根据模糊噪声的处理结果形成扭曲效果-- feDisplacementMap inSourceGraphic in2blurred scale70 xChannelSelectorR yChannelSelectorG/ /filter /svg script window.onload () { const container document.querySelector(.glass-container) document.onmousemove (e) { container.style.left e.x - 100 px container.style.top e.y - 100 px } } /script /body /html