tsja

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

  •  
  •   tsja · Jun 11, 2025 · 2660 views
    This topic created in 339 days ago, the information mentioned may be changed or developed.

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

    8 replies    2025-06-11 16:40:54 +08:00
    BingoXuan
        1
    BingoXuan  
       Jun 11, 2025
    整个界面用 webgpu 重写吧。我看了 wwdc 总结唯一想法就是,真的难为实现设计师效果的那帮工程师了,估计写 metal shader 写到想哭(最近自己也在手写 metal shader ,我也想哭)
    b821025551b
        3
    b821025551b  
       Jun 11, 2025
    @b821025551b 这个效果不错,但是资源占用太高了,3080 占用 15%。
    novcky
        4
    novcky  
       Jun 11, 2025
    @b821025551b #3 资源占用确实很高
    MzM2ODkx
        5
    MzM2ODkx  
       Jun 11, 2025
    我看推特上已经有人实现了,应该是用 SVG 滤镜。不过还没放源码吧
    HeyWeGo
        6
    HeyWeGo  
       Jun 11, 2025
    @b821025551b #2 这效果看了有点眼晕
    chztv
        7
    chztv  
       Jun 11, 2025
    @b821025551b 这个没有实现按钮拖动切换时的效果
    BigPiggggg
        8
    BigPiggggg  
       Jun 11, 2025
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   1404 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 38ms · UTC 17:06 · PVG 01:06 · LAX 10:06 · JFK 13:06
    ♥ Do have faith in what you're doing.