Apple Liquid Glass · 液态玻璃效果

控制中心

✈️

飞行模式

📡

Wi-Fi

🔵

蓝牙

Dock 栏

📁

🧭

💬

🎵

📷

通知

📅

日历提醒

下午 3:00 团队周会，会议室 A-301

📨

邮件 · 工作

部署完成，CI/CD 流水线全部通过 ✓

Spotlight 搜索

🔍

天气计算器提醒事项终端

玻璃按钮

SVG 位移折射效果

移动鼠标观察玻璃折射 · feDisplacementMap + feTurbulence

backdrop-filter

blur(20px) + saturate(180%) 实现真实背景模糊与饱和度提升

SVG feDisplacementMap

基于 feTurbulence 噪声生成位移图，模拟玻璃折射变形

边框高光

渐变 mask 技术实现 1px 渐变边框，模拟玻璃边缘反光

弹性鼠标追踪

弹簧物理模拟，玻璃球跟随鼠标产生弹性形变

RGB 通道分离

feColorMatrix 分离 R/G/B 通道，模拟色散折射效果

Liquid Glass