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

先看效果图

实现步骤

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

复制代码
<!--玻璃容器-->
<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>
相关推荐
nelly5211 小时前
CRMEB 单商户PRO多商户通用去版权教程
开发语言·前端·javascript
leo_qiu_s1 小时前
前端/后端,前台/中台/后台概念区别
前端·后端
穆罕周1 小时前
AI聊天方案:vue+nodeJs+SSE
前端·javascript·vue.js
ca_rry4 小时前
html结构解析
前端·html
子柒s4 小时前
HTML 基础
前端·html
三月的一天4 小时前
React+Three.js实现3D场景压力/温度/密度分布可视化
前端·javascript·react.js
患得患失9494 小时前
【前端】【Vue DevTools】Vue DevTools 进阶:用 Trae / Cursor 替换 VSCode 打开文件(跳转行列无误)
前端·vue.js·vscode
陌路玥4 小时前
第三章 浏览器 【1. 文档对象模型(DOM)】
开发语言·前端·javascript·html5
若梦plus5 小时前
tanstack中的react-query和SWR使用及对比
前端·react.js