用CSS、SVG和物理学模拟苹果WWDC 2025的Liquid Glass效果

本文深入探讨了如何使用CSS、SVG位移贴图和基于物理的折射计算在网页上重现类似苹果WWDC 2025上展示的Liquid Glass UI效果。文章从折射原理出发，解释了光线通过不同介质时如何弯曲，并介绍了如何使用数学函数来描述玻璃表面的形状，以及如何使用SVG位移贴图来模拟折射效果。最后，文章还演示了如何创建具有Liquid Glass效果的UI组件，例如放大镜、搜索框、开关和滑块等。需要注意的是，目前该效果在Chrome浏览器中效果最佳，其他浏览器可能存在兼容性问题。