先看效果圖
實現步驟
先定義玻璃元素和液態濾鏡
<!--玻璃容器-->
<div class="glass-container"><!--使用液態濾鏡--><div class="glass-filter"></div><!--邊沿效果--><div class="glass-specular"></div>
</div><!--創建液態濾鏡-->
<svg style="display: none"><filter height="100%" id="lg-dist" width="100%" 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>
編寫玻璃元素的樣式，以及應用液態濾鏡
.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 height="100%" id="lg-dist" width="100%" x="0%" y="0%">作用：定義一個 SVG 濾鏡效果。屬性：id="lg-dist"：濾鏡的唯一標識符，供 CSS 中通過 url(#lg-dist) 引用。width="100%" 和 height="100%"：濾鏡作用區域為整個目標元素的寬高。x="0%" 和 y="0%"：定義濾鏡區域相對于目標元素的位置（左上角開始）。
<feTurbulence baseFrequency="0.008 0.008" numOctaves="2" result="noise" seed="92" type="fractalNoise"/>作用：生成分形噪聲紋理，作為后續扭曲效果的基礎。屬性：type="fractalNoise"：使用分形噪聲算法生成紋理。baseFrequency="0.008 0.008"：控制噪聲的顆粒密度（值越小，顆粒越大）。numOctaves="2"：噪聲疊加的層級數，影響紋理復雜度。result="noise"：將該步驟的結果命名為 noise，供后續濾鏡操作引用。seed="92"：隨機種子值，確保每次生成相同的噪聲圖案。
<feGaussianBlur in="noise" result="blurred" stdDeviation="2"/>作用：對前面生成的噪聲進行模糊處理，使其更柔和。屬性：in="noise"：輸入源為之前生成的 noise。result="blurred"：將該步驟的結果命名為 blurred。stdDeviation="2"：高斯模糊的標準差，數值越大模糊程度越高。
<feDisplacementMap in="SourceGraphic" in2="blurred" scale="70" xChannelSelector="R" yChannelSelector="G"/>
作用：根據 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>
</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 class="glass-container"><!--使用液態濾鏡--><div class="glass-filter"></div><!--邊沿效果--><div class="glass-specular"></div>
</div><!--創建液態濾鏡-->
<svg style="display: none"><filter height="100%" id="lg-dist" width="100%" 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>
)
