文章摘要
文章介绍了如何在网页中使用CSS和SVG位移图以及基于物理的折射计算来模拟苹果在WWDC 2025上展示的Liquid Glass效果。通过从光的折射原理出发，文章逐步构建了核心折射效果和高光效果，并提供了一个仅在Chrome浏览器中可用的交互式演示。
文章总结
标题：浏览器中的液态玻璃：使用CSS和SVG实现折射效果
主要内容：
在2025年6月的WWDC大会上，苹果公司展示了液态玻璃效果，这是一种令人惊叹的UI效果，使得界面元素看起来像是由弯曲的、具有折射效果的玻璃制成。本文通过实际操作，探讨了如何使用CSS、SVG位移贴图和基于物理的折射计算，在网页上重现类似的效果。
文章从光的折射原理入手，解释了光在不同介质中传播时方向的变化，并通过斯涅尔定律（Snell's Law）描述了入射光和折射光之间的关系。为了简化计算，文章设定了以下限制条件：环境介质为空气（折射率为1），使用折射率大于1的材料（如玻璃），仅考虑一次折射事件，且入射光线始终垂直于背景平面。
接下来，文章详细介绍了如何通过数学函数定义虚拟玻璃表面的形状，并展示了四种不同的高度函数，分别对应凸圆形、凸方形、凹形和唇形表面。这些表面形状对光的折射效果产生了不同的影响，凸面使光线保持在玻璃内部，而凹面则使光线向外发散。
为了在浏览器中实现这些折射效果，文章使用了SVG位移贴图，将数学计算转换为浏览器可以渲染的图像格式。通过将位移矢量场转换为颜色值，生成了用于SVG滤镜的位移贴图。文章还展示了如何通过调整表面形状、边框宽度、玻璃厚度等参数，实时观察折射场的变化。
最后，文章介绍了如何通过镜面高光效果进一步增强液态玻璃的真实感，并将折射效果与高光效果结合，应用于实际的UI组件中，如放大镜、搜索框、开关、滑块和音乐播放器。
总结：
本文通过详细的数学计算和SVG滤镜的应用，成功在浏览器中实现了类似苹果液态玻璃的折射效果。尽管目前该效果仅在Chrome浏览器中完全支持，但它为未来的网页设计提供了新的可能性。文章最后呼吁读者提供反馈和建议，并期待进一步的优化和开源发布。
评论总结
评论主要围绕以下几个方面展开：
视觉效果与动画：
- 正面评价：评论1称赞了矢量动画的效果，但建议增加抗锯齿处理：“Very nice, I really like the vector animations :)”。
- 负面评价：评论14指出放大镜效果对文本的扭曲问题：“The magnifying glass effect distorts the text just enough to make it look off”。
性能与兼容性：
- 性能问题：评论5提到在高性能设备上仍存在卡顿问题：“scrolling down through the examples makes my fully-loaded M4-Max Macbook Pro judder”。
- 兼容性问题：评论7和12指出在Firefox上的兼容性问题：“Does this not work on Firefox?”。
技术实现与创新：
- 技术认可：评论3赞赏了不同于feTurbulence的实现方式：“this is the first one I've seen that isn't just feTurbulence”。
- 技术挑战：评论4分享了使用WebGL实现类似效果的挑战：“The tricky thing for me was making it refract real HTML elements behind”。
实际应用与可行性：
- 应用限制：评论8认为该技术在实际网站中可能不可行：“Though it doesn't seem like it'd be viable in a 'real' website”。
- 设计建议：评论13建议不要在网站上使用这种效果：“please don't use this on your websites, it looks like shit”。
用户体验与互动：
- 互动体验：评论10称赞了交互式视觉辅助工具：“i'm amazed how good the write-up is, with amazing interactive visual aids!”。
- 用户兴趣：评论9表达了对矢量场动画实现方式的兴趣：“How are the vector field animations done?”。
总结：评论中对视觉效果和技术实现有较多正面评价，但也指出了性能、兼容性和实际应用中的问题。部分用户对交互体验表示赞赏，但也有用户对设计效果提出批评。