只能在基于 Chromimum 内核的浏览器上才能看得到效果。
我挑了几个还原得比较像的，把链接放上来了，大家可以看看。
1 - 这个是我个人感觉最像的了
源码： https://codepen.io/Mikhail-Bespalov/pen/MYwrMNy
2 - 这个还原度差很多
源码： https://codesandbox.io/p/sandbox/nn5q2y
3 - 这个细节多一些，但是凸透镜效果也是不如第一个
预览： https://liquid-glass.maxrovensky.com/
仓库： https://github.com/rdev/liquid-glass-react
 |
1
https://codepen.io/rebane2001/details/OPVQXMv
我看到的是这个，还有各种参数可调，还在研究那个渐变图怎么驱动 DisplacementMap ，感觉这些效果对搞图形的可能并不是那么难，挺容易就做出来了。 |
 |
rocmaxJun 12, 2025 via Android
2
我觉得主要问题在于设备性能和功耗，实时计算模糊和水滴折射效果比较耗算力。
不过 apple 既然这么走了以后肯定也会有同样设计的 web ui 库 |
|
rocmaxJun 12, 2025 via Android
3
tailwindcss 有现成的 blur ，shadcn 已经在使用了，不知道像水滴边缘折射那样的效果怎么实现，可能需要 shader 。还有水滴间的粘连和弹跳动画也比较麻烦。
|
 |
4
|
 |
wangtian2020Jun 12, 2025
5
都怪 css 表现力太强了
|
 |
icyalalaJun 12, 2025
6
这些 demo 都没有做那个边缘效果，就是那个玻璃区域以外的颜色会被边缘反射的效果:
https://www.xiaohongshu.com/explore/6847ae070000000021007dae?xsec_token=CBgP0mm1cECGUB5LUtSh9v1n96SxcNO6KwiOgnfGdyLAA= |
 |
ChrisFreeManJun 12, 2025
7
那个反射是怎么回事啊，听说会随着环境而反射光泽？如果是真的，那所有非原生的 UI 实现都 over 了
|
 |
12
@ChrisFreeMan 通过现有技术还原到 100% 几乎是不可能的，除非看看后面有没有新的 API 出来；但是看了这么多方案，感觉还原到 80% 以上应该还是可以的。
|
 |
wyntalgeerJun 12, 2025
13
光污染
|
|
ChrisFreeManJun 12, 2025
15
@june4 还是腾讯有远见啊，听说早早就在应用里面尝试植入虚幻引擎了🐶
|
 |
LanayaaaJun 12, 2025
16
不加点消耗性能的功能，怎么淘汰旧机器，怎么创造换机需求? 😊
|
|
rocmaxJun 12, 2025 via Android
17
|
 |
19
|
 |
yokisamaJun 12, 2025 via Android
20
大量用 blur 对一些较老的设备都很吃力了，还要计算边缘反射，一多起来用户要骂娘了
|
 |
irrigate2554Jun 12, 2025
22
@yangheng4922 这个怕是比苹果官方都像玻璃。
|
|
irrigate2554Jun 12, 2025
23
@make17better 求求了，这种东西还是别整成标准了，我设备性能不是用来干这个的。
|
 |
shui14Jun 12, 2025
24
自己搓一个 2d 光追
|
 |
Lshl56B4vDqdixwKJun 12, 2025
25
哎，这种 UI 设计千万不要在 web 端普及，前端的噩梦，视障人士的噩梦。而且这种效果非常浪费资源，进一步加剧全球变暖。Apple, How dare you !?
|
 |
jqtmviyuJun 12, 2025
26
我喜欢谷歌的 md 1/2 设计语言, 这种半透明/模糊的实在欣赏不来.
|
|
27
@irrigate2554 哈哈哈😄，目前来看对性能的影响确实有点大，但说不定这在未来就不是问题了。
|
|
28
@yangheng4922 这个很厉害啊，这个效果在移动端 Safari 上都很完美！👍
|
 |
midraosJun 13, 2025
30
看到一个用 shader 实现的 https://www.shadertoy.com/view/WccXDj
|
 |
2BroearJun 13, 2025
31
连 backdrop-filter 都没弄明白，还弄这个
|
 |
montaro2017Jun 13, 2025
33
@yangheng4922 #19 为什么拖到最右边会显示一块黑斑
 |
1
Select Language