从 Snell 定律到 backdrop-filter：把苹果 Liquid Glass 复刻进网页

从 Snell 定律到 backdrop-filter：
把苹果 Liquid Glass 复刻进网页

MathLeee · 2026 年 7 月 · 全文 demo 均可交互,建议用 Chrome / Edge 阅读

⚠️ 检测到当前浏览器不是 Chromium 内核。本文的核心效果依赖 SVG backdrop-filter（目前仅 Chrome / Edge 支持），文中的玻璃演示会自动降级成普通磨砂——原理部分不受影响，但想看完整效果请换浏览器。

上次投稿写的是校园网,这次来点纯前端的。苹果在 iOS 26 里把系统 UI 换成了所谓 Liquid Glass（液态玻璃）:控件不再是一层简单的毛玻璃,而是一块有厚度、有曲率的"真玻璃"—— 边缘会折射背后的内容,拖动时还会像果冻一样形变回弹。

我在给自己 NAS 的页面做 UI 时想要这个效果,翻遍现成方案后发现要么依赖 WebGL 把背景当纹理渲染 (罩不了真实网页内容),要么干脆没开源。于是参考 kube.io 的原理文章和 Muggleee/liquid-glass 的 shader 思路,从物理公式开始复刻了一个零依赖、能作用于任意真实 DOM 的版本。本文把整条管线拆开讲,每一步都配了能拖能玩的 demo。

先玩为敬——把下面这个胶囊拖起来甩两下(注意松手瞬间的回弹,和边缘对背景的弯折):

LiquidGlass液态玻璃真折射REFRACTION丨丨丨丨丨

拖我 · 甩我

demo 0 · 完整效果:边缘折射 + 整体放大 + 色散 + 弹性物理

01毛玻璃的天花板

网页做"玻璃"的传统手艺是 glassmorphism:半透明底色 + backdrop-filter: blur() saturate()。它能出"磨砂"质感,但和真玻璃差着一个本质:磨砂是散射,玻璃是折射。真实玻璃块放在书页上,边缘处的文字会被"弯"进来、变形、错位——blur 给不了这个,它只会把一切均匀糊掉。

blur:均匀糊掉,边缘无事发生

折射:边缘弯折背景

demo 1 · 左:传统磨砂 / 右:本文的真折射(注意条纹在右块边缘的弯曲)

要边缘弯折,就得告诉浏览器"每个像素的背景采样位置应该偏移多少"。好消息是 SVG 滤镜里恰好有个原语干这事: feDisplacementMap(位移贴图)。坏消息是位移量得自己算——这就轮到光学出场了。

02给玻璃建模:squircle 高度函数

把玻璃块横截面看成一个高度函数 f(x):x 是"距边缘的归一化距离"(0=最外缘,1=平坦内部), f 是该处玻璃表面的高度。平坦区光线直进直出,弯曲的边缘区才发生折射,所以关键是边缘用什么曲线。

最直觉的是四分之一圆,但苹果的选择是 squircle(超椭圆):

f(x) = (1 − (1−x)⁴)^1/4

下面的曲线图可以切换对比。圆在 x=1 处(进入平坦区的交界)导数突变,折射强度会"咔"一下截止; squircle 的过渡则平滑得多——反映到最终效果上,就是玻璃边缘的弯折是"渐渐消失"而不是"突然消失"。这也是苹果连图标圆角都用超椭圆的同一个理由。

03Snell 定律:位移到底是多少

有了表面形状,对 f(x) 求导就得到每一点的表面斜率,也就是法线倾角 θ₁。竖直入射的视线穿过倾斜的玻璃表面时,按折射定律偏转:

sin θ₁ = n · sin θ₂ (n 为折射率,玻璃 ≈ 1.5)

光线在玻璃内偏转了 (θ₁−θ₂),再穿过下方厚度为 T 的玻璃到达背景,横向偏移就是:

位移 m(x) = tan(θ₁ − θ₂) × T(x)

其中 T(x) = 基础厚度 + f(x)×曲面高度。把 m(x) 画出来(下图),能看到它在紧贴边缘处最大、向内快速衰减、平坦区归零——正是"边缘弯折、中心清透"的数学来源。拖折射率滑杆感受一下: n 越大弯折越狠,n→1 时玻璃"消失"。

折射率 n1.50

04把位移场画成一张图

浏览器不认公式,只认图。feDisplacementMap 的约定是: 拿一张贴图,R 通道当 X 位移、G 通道当 Y 位移,128 表示不动,0/255 表示向负/正方向最大位移, 实际像素偏移 = scale × (通道值/255 − 0.5)。

于是在 Canvas 里逐像素干三件事:① 用圆角矩形 SDF(有向距离场)算出该像素距边缘多深; ② 查上一节的 m(x) 得到位移大小,方向取 SDF 梯度的反方向(指向中心); ③ 归一化后编码进 R/G。整场算完 toDataURL() 塞给 feImage,再接一个 feDisplacementMap,滤镜就成了。最后一步是点睛之笔—— Chromium 允许把 SVG 滤镜用在 backdrop-filter 上:

<!-- ① 滤镜定义,挂进页面一个隐藏的 <svg> 里。href 和 scale 由 JS 运行时填 -->
<filter id="lg">
  <feImage href="data:image/png;..." result="map"/>   <!-- href = canvas.toDataURL() -->
  <feDisplacementMap in="SourceGraphic" in2="map"
        xChannelSelector="R" yChannelSelector="G" scale="…"/>  <!-- scale = 2×最大位移 -->
</filter>

/* ② CSS 用 url(#id) 把这个滤镜当作 backdrop-filter,作用于元素背后的页面 */
.glass { backdrop-filter: url(#lg) blur(2px) saturate(1.4); }

这样滤镜作用的是元素背后的真实页面内容——不管下面是文字、图片还是别的组件,都会被折射。这正是它区别于 WebGL 方案的地方:WebGL 只能折射自己画的纹理,罩不了真实 DOM。

下面左边是实时生成的位移贴图本体(偏红=向右采样,偏绿=向下采样,灰色=不动), 右边的玻璃块用的就是这张图。拖动参数,两边同步变化:

贴图中心大片 128 灰 → 平坦区不折射;四周一圈彩色渐变就是 m(x) 编码出的边缘位移场。最大位移 — px(即滤镜的 scale/2)。

bezel 控制弯折圈的宽度,height 控制曲面陡峭程度(弯折强度),thickness 是基础厚度(整体强度)。

demo 2 · 参数实时重建贴图 + 滤镜

bezel 边缘宽24 height 曲面高28 thickness 厚度10

05第二层位移场:放大

kube.io 文中那个放大镜组件提到"用了两张位移贴图:一张管边缘折射,一张管缩放"。缩放场其实一行公式:要让透镜内呈现 k 倍放大,位置 P 处应采样 中心 + (P−中心)/k,即位移

d(P) = −(P − 中心) × (1 − 1/k)

两个场都是静态的,不必真用两张贴图——矢量相加进同一张图再统一归一化就行,省一次滤镜开销。加上放大场之后,玻璃才真正"凸"起来:

放大镜下的文字 MAGNIFY 12345拖动滑杆看倍率变化 ABCDE液态玻璃 · 真折射 · 零依赖

demo 3 · 放大场(k=1 时退化回纯边缘折射)

放大倍率 k1.35

06色散:彩虹镶边与一个大坑

真实玻璃对不同波长折射率不同,白光过棱镜会散成彩虹。模拟思路来自 Muggleee 的 shader: R/G/B 三通道分别用 (1+d)、1、(1−d) 倍的位移强度各折射一次再合成,边缘就会出现红蓝分离的镶边。 SVG 里对应三个 feDisplacementMap + 三个 feColorMatrix 抽通道 + feComposite arithmetic 加法合成。

这里踩了个值得记录的坑:最初我让抽通道的矩阵把其他通道的 alpha 也清零,结果合成出来只剩红色。原因是 feComposite arithmetic 在预乘 alpha 空间运算——alpha=0 的图层, 颜色分量预乘后全变 0,加法等于白加。修法是三个通道的矩阵都保持 alpha=1(矩阵第四行 0 0 0 0 1)。

demo 4 · 色散(注意边缘的红/蓝镶边;代价是滤镜开销 ×3)

色散强度 d0.10

07让它"活"过来:阻尼谐振子

视觉解决了,还差手感。苹果的液态玻璃拖起来是有生命的:抓住会放大并往"圆"收拢, 甩动会沿运动方向拉伸,松手会先从拉伸过冲到压缩、再稳定回原状。这些全部可以用同一个方程建模——标准阻尼谐振子:

a = −ω²·(x − 目标) − 2ζω·v

ω 决定快慢,ζ 决定弹性:ζ<1 欠阻尼(过冲、振荡),ζ=1 临界阻尼(最快无过冲),ζ>1 过阻尼(慢慢蹭过去)。我的实现里跑着四个互相独立的弹簧:

位置 ω=15, ζ=0.80 —— 跟手快,停下带一丝过冲;
缩放 ω=20, ζ=0.32 —— 抓起弹到 1.05 倍,欠阻尼到单击不拖也看得见 Q 弹;
凝聚 ω=14, ζ=0.40 —— 按住约 100ms 后启动,横向×0.90、纵向×1.15,胶囊往"圆"收拢;
拉伸 ω=13, ζ=0.28 —— 关键设计:拉伸量 s 本身是个欠阻尼振子,速度只是它的驱动目标。松手后驱动归零,欠阻尼保证 s 必然穿过 0 冲到负值(压缩)再回正——"拉伸→压缩→回原状"就是这么来的。

下面的胶囊可以切换拉伸弹簧的阻尼比,亲手感受三种阻尼的区别(横向快速甩动后松手):

欠阻尼临界阻尼过阻尼ζ = c / 2√(mk)

甩我试试

demo 5 · 弹性物理沙盒

一个工程细节:挂着 SVG 位移滤镜的元素,每帧改 transform 会迫使浏览器每帧重栅格化整个滤镜, 渲染线程直接被拖死。所以动画循环必须静止即休眠——所有弹簧都收敛后停掉 requestAnimationFrame,一个字节都不写;下次交互再唤醒。这是这套东西能实用的前提。

08回到苹果:Music 底栏复刻

原理讲完,验收标准很朴素:能不能像模像样地摆出苹果自己的界面。样板选 iOS 26 最标志性的应用——底部标签栏。选中态是一颗玻璃胶囊:点哪个标签它就弹过去, 也可以直接抓着拖。这里还原了一个容易被忽略的细节:苹果的玻璃在被拖动时中心几乎不模糊、显得更透, 只剩边缘折射在提醒你它是块玻璃。所以抓起瞬间我把磨砂 blur 直接归零、松手恢复—— 这个只需改 CSS 后处理串,不用重建贴图,零开销(本文所有可拖的玻璃都加了这个处理, 回去拖 demo 0 对比一下抓起前后的通透度)。胶囊沿用第 07 节的拉伸弹簧,快速拖动会沿运动方向拉长, 松手过冲到压缩再吸附归位。图标是照 SF 风格手绘的内联 SVG——SF Symbols 本体有授权限制, 自绘也顺便保住了"整页零外链"。

主页

新发现

广播

资料库

搜索

demo 6 · 标签栏:拖胶囊,覆盖处图标染红、blur 归零更透、按住放大+惯性拉伸,松手吸附

这颗胶囊看着简单,真正的功夫全在"被覆盖的图标要变成主题色"这一句上。直接在胶囊里叠一层染色图标,会漏出底下的白图标; 用一张图标、拿胶囊当遮罩再改色,遮罩边界又跟不上胶囊。最后落到一个干净结构:两张一模一样的图标层——白层和红层, 各自用 clip-path 裁成互补形状。红层裁成一颗胶囊(path() 画圆角 stadium),白层裁成"整条 dock 挖掉那颗胶囊" (同一条胶囊路径 + 外框矩形,靠 evenodd 填充规则挖洞)。同一个像素上永远只有一层可见,沿胶囊轮廓严丝合缝,从根上杜绝漏白。

这里先踩了个性能坑:胶囊遮罩最初是每帧重拼一张 SVG mask 贴图,浏览器每帧都要解码图片 + 算亮度,拖起来发卡; 而且 SVG 有固有尺寸,mask-size 拉伸到元素尺寸时坐标按比例缩放,越靠 dock 两端偏移越明显。换成 clip-path ——矢量裁剪、GPU 合成、不解码任何图片,坐标又是 dock 内的绝对像素,卡顿和边缘偏移一起消失。

图标层压在胶囊玻璃之上(z 更高),所以它清晰、不被折射;胶囊那块玻璃则专门做凹透镜(放大率<1), 只把背后 dock 自己的边框往里压,做出"胶囊内 dock 边缘下沉、内低外高"的按压手感。按下时再给红层图标一个 CSS scale (联动第 07 节那根抓取放大的弹簧值),让选中的图标胀大、填满放大后的胶囊。

最隐蔽的坑是两个坐标系。可拖的胶囊(pill)是 dock 的兄弟,红/白图标层却是 dock 的子元素。按下时整条 dock 会呼吸放大一档,这个 scale 只作用于 dock 的子元素——于是红 clip 跟着放大、pill 没放大, 两者从 dock 中心往外逐渐错开。想当然的修法是把 pill 也塞进 dock,结果胶囊里一片发白:dock 本身带一层玻璃, pill 一旦成了它的子元素,backdrop-filter 就只能采样到那层发白磨砂、采不到后面的专辑图——这是 Chromium 嵌套 backdrop-filter 的硬限制。所以 pill 只能留在 dock 外,改用补偿法:dock 的呼吸放大由一根弹簧驱动,pill 每帧围绕 dock 中心按同样倍率缩放(中心 + (胶囊位置 − 中心) × 放大率),两者的中心和尺寸就恒等,任何缩放时刻都严丝合缝。

09兼容性、性能与结语

兼容性:SVG 滤镜作为 backdrop-filter 目前是 Chromium(Chrome/Edge)独门,不在 CSS 规范里; Firefox/Safari 只能退化成 blur+saturate 磨砂。我的封装里做了自动降级,页面不会坏。
性能:贴图生成是纯 Canvas 像素循环,卡片尺寸毫秒级;大元素自动降采样(feImage 会拉伸回去, 位移向量插值无碍)。真正的开销在滤镜栅格化——所以①别给持续动画的元素挂滤镜,②色散按需开(×3 开销), ③静止休眠。
尺寸响应:ResizeObserver 监听元素尺寸变化自动重建贴图,圆角直接读 CSS border-radius。

整套实现是两个零依赖的原生 JS 文件:核心库(贴图生成 + 滤镜注入,约 300 行)和悬浮胶囊组件 (弹性物理,约 200 行),没有构建步骤,<script> 引入即用。本文页面本身就是运行时——你看到的每个 demo 都是这套代码在你浏览器里现算的, 右键查看源码即可拿走全部实现。

参考与致谢:原理管线来自 kube.io — Liquid Glass in CSS (and SVG) (未开源,本文按公式独立实现);色散与 SDF 思路来自 Muggleee/liquid-glass (WebGL2 方案)。

从 Snell 定律到 backdrop-filter：把苹果 Liquid Glass 复刻进网页

评论