前端实现ios26最新液态玻璃效果的步骤记录

更新时间：2025年07月07日 11:06:54 作者：独断万古的伊莉雅

这篇文章主要介绍了前端实现ios26最新液态玻璃效果的步骤记录,定义玻璃元素样式并应用液态滤镜,通过滤镜的动态变化模拟液体流动感,结合CSS或JavaScript实现原理,最终呈现视觉效果,需要的朋友可以参考下

先看效果图

实现步骤

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

<!--玻璃容器-->
<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>

总结

到此这篇关于前端实现ios26最新液态玻璃效果的文章就介绍到这了,更多相关前端ios26液态玻璃效果内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

微信小程序实现全局状态管理的方法整理
已知微信小程序中如果要做到全局状态共享，常用的有四种方式，分别是globalData、本地缓存、mobx-miniprogram和westore，本文将带大家看看mobx-miniprogram是如何实现的小程序的全局状态管理，需要的可以收藏一下
2023-06-06
javaScript call 函数的用法说明
javaScript 中的 call() 是一个奇妙的方法，但也是一个让人迷惑的方法，先看一下官方的解释。
2010-04-04
js网页版计算器的简单实现
这篇文章介绍了网页版计算器的简单实现代码，有需要的朋友可以参考一下
2013-07-07
JS改变页面颜色源码分享
本篇文章是JS的一个网页制作小技巧，应用在很多地方，通过JS改变HTML页面的颜色，有兴趣的学习下。
2018-02-02
向大师们学习Javascript（视频与PPT）
在开始之前，先与大家一起认识下这篇文章的主角，世界级的javascript大牛们：Douglas Crockford、John Resig、Peter-Paul Koch、Nicolas C. Zakas。看名字也许挺陌生，但是如果你对javascript还算熟悉，一定不会对他们的作品陌生。
2009-12-12
JavaScript中调用函数的4种方式代码实例
这篇文章主要介绍了JavaScript中调用函数的4种方式代码实例,本文分别给出方法调用模式、函数调用模式、构造器调用模式、apply调用模式4种方式的代码实例,需要的朋友可以参考下
2015-07-07
js实现超酷的照片墙展示效果图附源码下载
这篇文章主要介绍了超酷的照片墙展示效果图附源码下载的相关资料,需要的朋友可以参考下
2015-10-10
javascript级联下拉列表实例代码(自写)
javascript下拉菜单想必大家在浏览网页的时候都会看到吧，已不是那么陌生了，本文介绍使用javascript实现级联下拉列表实例，感兴趣的朋友可以参考下哈，希望对你有所帮助
2013-05-05
TypeScript 中 omit 和 record 用法小结
TypeScript中Omit和Record工具类型可以组合使用实现灵活的类型操作,Record创建键为K、值为T的对象类型,Omit从T中移除指定键,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
2026-05-05
前端页面在移动设备上显示不正常的原因及解决方案
当页面在移动设备上显示不正常时,通常是由于布局、样式或响应式设计设置不当所引起的,移动设备的屏幕尺寸、分辨率和交互方式与桌面设备有很大的不同,本文将详细介绍常见的导致页面在移动设备上显示不正常的原因,以及如何解决这些问题,需要的朋友可以参考下
2024-09-09