只能在基于 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 kamilic 122 天前 ![]() https://codepen.io/rebane2001/details/OPVQXMv 我看到的是这个,还有各种参数可调,还在研究那个渐变图怎么驱动 DisplacementMap ,感觉这些效果对搞图形的可能并不是那么难,挺容易就做出来了。 |
2 rocmax 122 天前 via Android 我觉得主要问题在于设备性能和功耗,实时计算模糊和水滴折射效果比较耗算力。 不过 apple 既然这么走了以后肯定也会有同样设计的 web ui 库 |
3 rocmax 122 天前 via Android tailwindcss 有现成的 blur ,shadcn 已经在使用了,不知道像水滴边缘折射那样的效果怎么实现,可能需要 shader 。还有水滴间的粘连和弹跳动画也比较麻烦。 |
![]() | 4 mmnsghgn 122 天前 ![]() |
![]() | 5 wangtian2020 122 天前 都怪 css 表现力太强了 |
![]() | 6 icyalala 122 天前 这些 demo 都没有做那个边缘效果,就是那个玻璃区域以外的颜色会被边缘反射的效果: https://www.xiaohongshu.com/explore/6847ae070000000021007dae?xsec_token=CBgP0mm1cECGUB5LUtSh9v1n96SxcNO6KwiOgnfGdyLAA= |
![]() | 7 ChrisFreeMan 122 天前 那个反射是怎么回事啊,听说会随着环境而反射光泽?如果是真的,那所有非原生的 UI 实现都 over 了 |
![]() | 12 gophlet OP @ChrisFreeMan 通过现有技术还原到 100% 几乎是不可能的,除非看看后面有没有新的 API 出来;但是看了这么多方案,感觉还原到 80% 以上应该还是可以的。 |
![]() | 13 wyntalgeer 122 天前 光污染 |
![]() | 15 ChrisFreeMan 122 天前 @june4 还是腾讯有远见啊,听说早早就在应用里面尝试植入虚幻引擎了 |
![]() | 16 Lanayaaa 122 天前 不加点消耗性能的功能,怎么淘汰旧机器,怎么创造换机需求? |
17 rocmax 121 天前 via Android |
![]() | 19 yangheng4922 121 天前 ![]() |
![]() | 20 yokisaa 121 天前 via Android 大量用 blur 对一些较老的设备都很吃力了,还要计算边缘反射,一多起来用户要骂娘了 |
![]() | 22 irrigate2554 121 天前 @yangheng4922 这个怕是比苹果官方都像玻璃。 |
![]() | 23 irrigate2554 121 天前 @make17better 求求了,这种东西还是别整成标准了,我设备性能不是用来干这个的。 |
24 shui14 121 天前 自己搓一个 2d 光追 |
![]() | 25 Lshl56B4vDqdixwK 121 天前 哎,这种 UI 设计千万不要在 web 端普及,前端的噩梦,视障人士的噩梦。而且这种效果非常浪费资源,进一步加剧全球变暖。Apple, How dare you !? |
![]() | 26 jqtmviyu 121 天前 我喜欢谷歌的 md 1/2 设计语言, 这种半透明/模糊的实在欣赏不来. |
![]() | 27 gophlet OP @irrigate2554 哈哈哈,目前来看对性能的影响确实有点大,但说不定这在未来就不是问题了。 |
![]() | 28 gophlet OP @yangheng4922 这个很厉害啊,这个效果在移动端 Safari 上都很完美! |
30 midraos 121 天前 看到一个用 shader 实现的 https://www.shadertoy.com/view/WccXDj |
31 2Broear 121 天前 连 backdrop-filter 都没弄明白,还弄这个 |
![]() | 33 montaro2017 121 天前 @yangheng4922 #19 为什么拖到最右边会显示一块黑斑 ![]() |