仿 Liquid Glass 的效果已经有人在 Web 上复刻出一部分了（非完全还原）

[gophlet]

只能在基于 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

[kamilic]

https://codepen.io/rebane2001/details/OPVQXMv
我看到的是这个，还有各种参数可调，还在研究那个渐变图怎么驱动 DisplacementMap ，感觉这些效果对搞图形的可能并不是那么难，挺容易就做出来了。

[rocmax]

我觉得主要问题在于设备性能和功耗，实时计算模糊和水滴折射效果比较耗算力。
不过 apple 既然这么走了以后肯定也会有同样设计的 web ui 库

[rocmax]

tailwindcss 有现成的 blur ，shadcn 已经在使用了，不知道像水滴边缘折射那样的效果怎么实现，可能需要 shader 。还有水滴间的粘连和弹跳动画也比较麻烦。

[mmnsghgn]

https://v0.dev/chat/dynamic-frame-layout-1VUCCecq7Uy

https://github.com/shuding/liquid-glass?tab=readme-ov-file

[wangtian2020]

都怪 css 表现力太强了

[icyalala]

这些 demo 都没有做那个边缘效果，就是那个玻璃区域以外的颜色会被边缘反射的效果:
https://www.xiaohongshu.com/explore/6847ae070000000021007dae?xsec_token=CBgP0mm1cECGUB5LUtSh9v1n96SxcNO6KwiOgnfGdyLAA=

[ChrisFreeMan]

那个反射是怎么回事啊，听说会随着环境而反射光泽？如果是真的，那所有非原生的 UI 实现都 over 了

[gophlet]

@kamilic 感谢分享，这个看起来很不错👍

[gophlet]

@rocmax 是的，目前来看性能问题比较大，动画复杂度也很高。

[gophlet]

@zhengjian 感谢分享，很强！

[gophlet]

@icyalala 确实，太细了这个。

[gophlet]

@ChrisFreeMan 通过现有技术还原到 100% 几乎是不可能的，除非看看后面有没有新的 API 出来；但是看了这么多方案，感觉还原到 80% 以上应该还是可以的。

[wyntalgeer]

光污染

[june4]

@icyalala 怪不得我在另一个贴看到有人说苹果用了光追底下一堆人喷用不到，原来还有这效果，属实有点过份拟物了，性能过剩不消耗掉怕新机卖不动

[ChrisFreeMan]

@june4 还是腾讯有远见啊，听说早早就在应用里面尝试植入虚幻引擎了🐶

[Lanayaaa]

不加点消耗性能的功能，怎么淘汰旧机器，怎么创造换机需求? 😊

[rocmax]

https://appleliquidglass.vercel.app/

[gophlet]

@rocmax Cool.

[yangheng4922]

https://flutterglass.wearemobilefirst.com/
看过最像的

[yokisama]

大量用 blur 对一些较老的设备都很吃力了，还要计算边缘反射，一多起来用户要骂娘了

[gzlock]

@yokisama 19 楼的 flutter 网页用 shader 实现的，很流畅

[irrigate2554]

@yangheng4922 这个怕是比苹果官方都像玻璃。

[irrigate2554]

@make17better 求求了，这种东西还是别整成标准了，我设备性能不是用来干这个的。

[shui14]

自己搓一个 2d 光追

[Lshl56B4vDqdixwK]

哎，这种 UI 设计千万不要在 web 端普及，前端的噩梦，视障人士的噩梦。而且这种效果非常浪费资源，进一步加剧全球变暖。Apple, How dare you !?

[jqtmviyu]

我喜欢谷歌的 md 1/2 设计语言, 这种半透明/模糊的实在欣赏不来.

[gophlet]

@irrigate2554 哈哈哈😄，目前来看对性能的影响确实有点大，但说不定这在未来就不是问题了。

[gophlet]

@yangheng4922 这个很厉害啊，这个效果在移动端 Safari 上都很完美！👍

[gophlet]

@user23125 这套设计系统一点都不环保 🐶

[midraos]

看到一个用 shader 实现的 https://www.shadertoy.com/view/WccXDj

[2Broear]

连 backdrop-filter 都没弄明白，还弄这个

[gophlet]

@midraos 这个玻璃边缘的效果做得比较好。

[montaro2017]

@yangheng4922 #19 为什么拖到最右边会显示一块黑斑