Apple 2025 Liquid Glass Effect

苹果公司 2025 年发布的液态玻璃特效 CSS 实现

🌟 效果展示

这是对 Apple 在 2025 年发布的全新液态玻璃设计语言的完整 CSS 复现。通过 SVG 滤镜和多层叠加技术，实现了真实的光学折射和玻璃质感。

✨ 核心特性

• 🔮 真实光学效果 - 使用 SVG 滤镜模拟玻璃折射和扭曲
• 💎 多层玻璃结构 - 三层叠加创造真实玻璃深度感
• 🌊 背景内容扭曲 - 背景元素被真实地光学折射
• ⚡ 流畅交互动画 - Apple 风格的缓动函数和过渡效果

🛠️ 技术实现

SVG 滤镜核心

<filter id="glass-distortion">
  <feTurbulence type="fractalNoise" baseFrequency="0.01 0.01" />
  <feSpecularLighting surfaceScale="5" specularConstant="1" />
  <feDisplacementMap scale="150" />
</filter>

CSS 三层结构

.glass-layer-1 {
  backdrop-filter: blur(4px);
  filter: url(#glass-distortion);
}
.glass-layer-2 {
  background: rgba(255, 255, 255, 0.25);
}
.glass-layer-3 {
  box-shadow: inset highlights;
}