1. Frosted Glass from Games to the Web: HTML glass UI inspired by AAA game dev (www.tyleo.com)
这篇文章介绍了如何将游戏开发中的高级毛玻璃UI效果移植到Web上,并提供了实现这种效果的逐步指南和代码示例。
核心内容包括:
- 灵感来源:作者基于为《极限竞速:地平线3》和《极限竞速7》开发UI的经验。
- 关键技术:主要使用CSS的
backdrop-filter: blur()属性来创建毛玻璃的模糊效果。 - 增强深度与真实感:
- 使用
box-shadow: inset来模拟玻璃边缘,比border更利于子元素布局。 - 添加传统的外部
box-shadow以营造立体悬浮感。 - 通过多层内部
box-shadow近似模拟“次表面散射”效果。
- 使用
- 高级光照效果:
- 为了模拟光线反射,将一张预制的“光线”图片通过
::before伪元素混合到玻璃上。 - 为实现光线在玻璃移动时动态变化的效果,提供了两种方案:
- 纯CSS方案:使用
background-attachment: fixed(移动端兼容性有限)。 - 跨平台JS方案:使用JavaScript动态调整背景位置,以模拟固定背景效果,确保所有平台兼容。
- 纯CSS方案:使用
- 为了模拟光线反射,将一张预制的“光线”图片通过
- 最终完善:通过
border-radius添加圆角,并在玻璃上叠加一个带透明度的彩色层来完成最终效果。
文章在开头和结尾都提供了完整的最终代码(分为带JS和不带JS两个版本),方便读者直接复制使用。