【代码】使用HTML5+CSS+SVG 实现苹果液态玻璃(Liquid Glass)效果-应用技术-阳光梦想

来晚了，昨天发现TouTube的播放页面改了，改成了苹果的液态玻璃效果，就好奇他怎么实现的。这东西的核心理念就是【模糊背景】+【不规则扭曲】，像是透过正在晃动的水来看下面的东西一样

1、原理

使用svg 的 feDisplacementMap 这个属性扭曲背景

再配合 backdrop-filter: blur(1px) 做出流动的视觉

传统的毛玻璃效果，我们用 backdrop-filter: blur(10px); 就能轻松搞定。但那只是一个均匀的模糊，看起来很「平」。而「液态」效果的关键在于不均匀的扭曲。

光线穿过一块完全平坦的毛玻璃，和穿过一块表面凹凸不平、像水波一样的玻璃，看到的景象肯定不同。后者会产生更多奇妙的折射和位移。我们的目标，就是用一张「凹凸不平的纹理图」，来告诉浏览器如何去扭曲、置换背景的像素。

2、准备HTML及SVG

<!--這是我們想變成液態玻璃的任何內容-->
<div class="liquid">測試~</div>

<!--svg  濾鏡-->
<svg width="0" height="0" style="position:fixed;left:-9999px;top:-9999px">
    <defs>
        <filter id="liquid_glass_filter" x="0%" y="0%" width="100%" height="100%" filterUnits="objectBoundingBox">
            <feTurbulence type="fractalNoise" baseFrequency="0.003" numOctaves="2" seed="7" result="noise"/>
            <feGaussianBlur in="noise" stdDeviation="1.2" result="map"/>
            <feDisplacementMap in="SourceGraphic" in2="map" scale="110" xChannelSelector="R" yChannelSelector="G"/>
        </filter>
    </defs>
</svg>

<!-- 可微調參數（按需改一兩個就有感）
- 更波動：baseFrequency 調到 0.025 ~ 0.03 或 scale 調到 120~150。
- 更柔順：stdDeviation 調到 1.6 ~ 2.2。
- 降低上下晃動：把 <feDisplacementMap> 的 yChannelSelector="G" 改成 B，上下位移會比較弱。 -->

3、核心CSS样式

.liquid {
    /* 真正的液態關鍵：先模糊、再用 SVG 位移地圖扭曲背景 */
    backdrop-filter: blur(1px) url(#liquid_glass_filter);

    /* 用 box-shadow 取代邊框，營造厚度與光暈 */
    box-shadow:
            inset 0 1px 0 rgba(255,255,255,0.45),
            inset 0 -1px 0 rgba(255,255,255,0.18),
            inset 6px 6px 16px rgba(255,255,255,0.12),
            0 10px 28px rgba(0,0,0,0.35);

    background: rgba(255,255,255, 0.1);
    /*     mask: linear-gradient(90deg, transparent, #000); */

}

/* 若瀏覽器不支援 backdrop-filter，就用柔和漸層墊底 */
@supports not (backdrop-filter: blur(1px)) {
    .liquid {
        background: linear-gradient(135deg, rgba(255,255,255,0.10), rgba(255,255,255,0.04));
    }
}