介绍如何使用 SVG 滤镜结合 CSS 实现液态玻璃视觉效果。通过 feTurbulence 生成噪声，feGaussianBlur 模糊处理，feDisplacementMap 进行位移扭曲，配合 backdrop-filter 实现磨砂玻璃质感。代码包含 HTML 结构、CSS 样式及鼠标跟随交互逻辑，适用于前端 UI 动效开发。
定义玻璃元素和液态滤镜。
<!--玻璃容器-->
<div>
<!--使用液态滤镜-->
<div></div>
<!--边沿效果-->
<div></div>
</div>
<!--创建液态滤镜-->
<svg>
<filter x="0%" y="0%">
<!--生成噪声图案-->
<feTurbulence baseFrequency="0.008 0.008" numOctaves="2" result="noise" seed="92" type="fractalNoise"/>
<!--模糊噪声-->
<feGaussianBlur in="noise" result="blurred" stdDeviation="2"/>
<!--根据模糊噪声的处理结果，形成扭曲效果-->
<feDisplacementMap = = = = =/>
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online
将 Markdown（GFM）转为 HTML 片段，浏览器内 marked 解析；与 HTML转Markdown 互为补充。 在线工具，Markdown转HTML在线工具，online
将 HTML 片段转为 GitHub Flavored Markdown，支持标题、列表、链接、代码块与表格等；浏览器内处理，可链接预填。 在线工具，HTML转Markdown在线工具，online
通过删除不必要的空白来缩小和压缩JSON。 在线工具，JSON 压缩在线工具，online
将JSON字符串修饰为友好的可读格式。 在线工具，JSON美化和格式化在线工具，online
编写玻璃元素的样式，以及应用液态滤镜。
.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);
}
作用：定义一个 SVG 滤镜效果。属性：滤镜的唯一标识符，供 CSS 中通过 url(#lg-dist) 引用。x="0%" 和 y="0%"：定义滤镜区域相对于目标元素的位置（左上角开始）。
作用：生成分形噪声纹理，作为后续扭曲效果的基础。属性：type="fractalNoise"：使用分形噪声算法生成纹理。baseFrequency="0.008 0.008"：控制噪声的颗粒密度（值越小，颗粒越大）。numOctaves="2"：噪声叠加的层级数，影响纹理复杂度。result="noise"：将该步骤的结果命名为 noise，供后续滤镜操作引用。seed="92"：随机种子值，确保每次生成相同的噪声图案。
作用：对前面生成的噪声进行模糊处理，使其更柔和。属性：in="noise"：输入源为之前生成的 noise。result="blurred"：将该步骤的结果命名为 blurred。stdDeviation="2"：高斯模糊的标准差，数值越大模糊程度越高。
作用：根据 blurred 图像的颜色通道来偏移原始图像，形成扭曲效果。属性：in="SourceGraphic"：主输入源为目标元素本身。in2="blurred"：第二输入源为模糊后的噪声图像。scale="70"：控制位移强度，值越大扭曲越明显。xChannelSelector="R"：X 方向上的位移由红色通道决定。yChannelSelector="G"：Y 方向上的位移由绿色通道决定。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<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>
</head>
<body>
<!--玻璃容器-->
<div>
<!--使用液态滤镜-->
<div></div>
<!--边沿效果-->
<div></div>
</div>
<!--创建液态滤镜-->
<svg>
<filter x="0%" y="0%">
<feTurbulence baseFrequency="0.008 0.008" numOctaves="2" result="noise" seed="92" type="fractalNoise"/>
<feGaussianBlur in="noise" result="blurred" stdDeviation="2"/>
<feDisplacementMap in="SourceGraphic" in2="blurred" scale="70" xChannelSelector="R" yChannelSelector="G"/>
</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>