前端实现ios26最新液态玻璃效果！_css液态玻璃

先看效果图

实现步骤

先定义玻璃元素和液态滤镜

编写玻璃元素的样式，以及应用液态滤镜

.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 滤镜效果。属性：id=\"lg-dist\"：滤镜的唯一标识符，供 CSS 中通过 url(#lg-dist) 引用。width=\"100%\" 和 height=\"100%\"：滤镜作用区域为整个目标元素的宽高。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 方向上的位移由绿色通道决定。

完整代码

   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); }
  
  
         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\' } }

免费英语口语听力