前端實現(xiàn)ios26最新液態(tài)玻璃效果的步驟記錄

更新時間：2025年07月07日 11:06:54 作者：獨斷萬古的伊莉雅

這篇文章主要介紹了前端實現(xiàn)ios26最新液態(tài)玻璃效果的步驟記錄,定義玻璃元素樣式并應用液態(tài)濾鏡,通過濾鏡的動態(tài)變化模擬液體流動感,結(jié)合CSS或JavaScript實現(xiàn)原理,最終呈現(xiàn)視覺效果,需要的朋友可以參考下

先看效果圖

實現(xiàn)步驟

先定義玻璃元素和液態(tài)濾鏡

<!--玻璃容器-->
<div class="glass-container">
    <!--使用液態(tài)濾鏡-->
    <div class="glass-filter"></div>
    <!--邊沿效果-->
    <div class="glass-specular"></div>
</div>

<!--創(chuàng)建液態(tài)濾鏡-->
<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"/>
        <!--根據(jù)模糊噪聲的處理結(jié)果，形成扭曲效果-->
        <feDisplacementMap in="SourceGraphic" in2="blurred" scale="70" xChannelSelector="R" yChannelSelector="G"/>
    </filter>
</svg>

編寫玻璃元素的樣式，以及應用液態(tài)濾鏡

.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); 
        /*創(chuàng)建獨立渲染區(qū)，防止影響容器中的內(nèi)容*/
        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);
    }

實現(xiàn)原理

這樣一個液態(tài)玻璃效果就實現(xiàn)了，是不是非常簡單，現(xiàn)在來說下實現(xiàn)原理

 <filter height="100%" id="lg-dist" width="100%" x="0%" y="0%">
	作用：定義一個 SVG 濾鏡效果。
	屬性：
	id="lg-dist"：濾鏡的唯一標識符，供 CSS 中通過 url(#lg-dist) 引用。
	width="100%" 和 height="100%"：濾鏡作用區(qū)域為整個目標元素的寬高。
	x="0%" 和 y="0%"：定義濾鏡區(qū)域相對于目標元素的位置（左上角開始）。

 <feTurbulence baseFrequency="0.008 0.008" numOctaves="2" result="noise" seed="92" type="fractalNoise"/>
	作用：生成分形噪聲紋理，作為后續(xù)扭曲效果的基礎(chǔ)。
	屬性：
	type="fractalNoise"：使用分形噪聲算法生成紋理。
	baseFrequency="0.008 0.008"：控制噪聲的顆粒密度（值越小，顆粒越大）。
	numOctaves="2"：噪聲疊加的層級數(shù)，影響紋理復雜度。
	result="noise"：將該步驟的結(jié)果命名為 noise，供后續(xù)濾鏡操作引用。
	seed="92"：隨機種子值，確保每次生成相同的噪聲圖案。

 <feGaussianBlur in="noise" result="blurred" stdDeviation="2"/>
	作用：對前面生成的噪聲進行模糊處理，使其更柔和。
	屬性：
	in="noise"：輸入源為之前生成的 noise。
	result="blurred"：將該步驟的結(jié)果命名為 blurred。
	stdDeviation="2"：高斯模糊的標準差，數(shù)值越大模糊程度越高。

<feDisplacementMap in="SourceGraphic" in2="blurred" scale="70" xChannelSelector="R" yChannelSelector="G"/>
作用：根據(jù) 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);
        /*創(chuàng)建獨立渲染區(qū)，防止影響容器中的內(nèi)容*/
        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">
    <!--使用液態(tài)濾鏡-->
    <div class="glass-filter"></div>
    <!--邊沿效果-->
    <div class="glass-specular"></div>
</div>

<!--創(chuàng)建液態(tài)濾鏡-->
<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"/>
        <!--根據(jù)模糊噪聲的處理結(jié)果，形成扭曲效果-->
        <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>