V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
tsja
V2EX  ›  前端开发

如何在前端实现 iOS 26 的液态玻璃(Liquid Glass)样式?

  •  
  •   tsja · 51 天前 · 1570 次点击
    这是一个创建于 51 天前的主题,其中的信息可能已经有所发展或是发生改变。

    如题,之前的扁平、毛玻璃、半拟物的风格都能通过设置背景色、阴影和高光实现,但这次液态玻璃就涉及到了光影、反射和透视的关系了。在前端中有什么可以实现的方式?

    8 条回复    2025-06-11 16:40:54 +08:00
    BingoXuan
        1
    BingoXuan  
       51 天前
    整个界面用 webgpu 重写吧。我看了 wwdc 总结唯一想法就是,真的难为实现设计师效果的那帮工程师了,估计写 metal shader 写到想哭(最近自己也在手写 metal shader ,我也想哭)
    b821025551b
        3
    b821025551b  
       51 天前
    @b821025551b 这个效果不错,但是资源占用太高了,3080 占用 15%。
    search1615
        4
    search1615  
       51 天前
    @b821025551b #3 资源占用确实很高
    iMusic
        5
    iMusic  
       51 天前
    我看推特上已经有人实现了,应该是用 SVG 滤镜。不过还没放源码吧
    HeyWeGo
        6
    HeyWeGo  
       51 天前
    @b821025551b #2 这效果看了有点眼晕
    chztv
        7
    chztv  
       51 天前
    @b821025551b 这个没有实现按钮拖动切换时的效果
    关于   ·   帮助文档   ·   自助推广系统   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   948 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 19:59 · PVG 03:59 · LAX 12:59 · JFK 15:59
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.