说一下本站Liquid Glass效果的实现原理吧

好啦，终于闲下来有时间讲讲网站的开发过程了，这个网站的最大特点应该是仿苹果Liquid Glass液态玻璃效果，所以我们先从LiquidGlass组件说起吧。

LiquidGlass组件

在设计之初，是苹果发布会推出全新设计语言—Liquid Glass不久，那是网上已经开始有人做出了类似效果，我也是找了一位老哥开源的代码：liquid-glass-effect-macos，因为发布比较早，而且实现原理比较简单，所以我就决定选它了。

通过研究发现这个简单却精妙的实现真的很有意思，于是把它拿来封装成了组件，我们现在把它的实现原理好好分析一下。

核心架构设计

LiquidGlass组件采用了多层叠加的设计思路，通过四个关键层次来构建液态玻璃效果：

// 组件的层次结构
<div class="liquid-glass-container">
  <div class="liquidGlass-wrapper">
    <div class="liquidGlass-effect"/>     // 背景模糊层
    <div class="liquidGlass-tint"/>       // 色调层
    <div class="liquidGlass-shine"/>          // 高光层
    <div class="liquidGlass-text">            // 内容层
      <slot />
    </div>
  </div>
</div>

这种分层设计的好处是每一层都有明确的职责，便于调试和优化。

液态效果的核心

其实这个液态玻璃最核心的部分是SVG滤镜的运用。组件通过一个名为glass-distortion的自定义滤镜来实现液态扭曲效果：

<filter id="glass-distortion">
  <!-- 生成分形噪声 -->
  <feTurbulence type="fractalNoise" baseFrequency="0.001 0.004" numOctaves="1" seed="17" result="turbulence"/>
  
  <!-- 高斯模糊软化边缘 -->
  <feGaussianBlur in="turbulence" stdDeviation="3" result="softMap"/>
  
  <!-- 镜面反射光照效果 -->
  <feSpecularLighting in="softMap" surfaceScale="5" specularConstant="1" specularExponent="100">
    <fePointLight x="-200" y="-200" z="300"/>
  </feSpecularLighting>
  
  <!-- 位移映射实现扭曲 -->
  <feDisplacementMap in="SourceGraphic" in2="softMap" scale="100"/>
</filter>

滤镜中有几个比较核心的参数：

feTurbulence 生成随机噪声模拟液体的不规则性
feSpecularLighting 创建镜面反射效果
feDisplacementMap 根据噪声图进行像素位移，形成液态扭曲

CSS样式辅助

背景模糊层（Effect Layer）

我做了两套样式，高透和模糊的，适用于不同的场景。比如注重文字阅读的区域就用模糊的，突出文字，提升阅读体验。

.liquidGlass-effect {
  backdrop-filter: blur(2px);  // 轻度模糊
  filter: url(#glass-distortion);
}

.liquidGlass-effect-h {
  backdrop-filter: blur(6px);  // 重度模糊
}

色调层（Tint Layer）

.liquidGlass-tint {
  background: rgba(255, 255, 255, 0.1);  // 轻微白色覆盖
}

.liquidGlass-tint-h {
  background: rgba(255, 255, 255, 0.45); // 更强的白色覆盖
}

高光层（Shine Layer）

.liquidGlass-shine {
  box-shadow: 
    inset 2px 2px 1px 0 rgba(255, 255, 255, 0.5),
    inset -1px -1px 1px 1px rgba(255, 255, 255, 0.4);
}

这里使用了内阴影，通过不同方向的白色内阴影模拟玻璃表面的光线折射。

深色模式的适配策略

对了网站的深色模式也做了适配

LiquidGlass组件深色模式

在深色模式下，色调从白色变为深灰色，但高光依然保持白色，这样既保持了玻璃质感，又确保了在深色背景下的可见性。

.dark .liquid-glass-container {
  .liquidGlass-tint-h {
    background: rgba(45, 45, 45, 0.5);  // 深色背景
  }
  
  .liquidGlass-shine {
    box-shadow: inset 2px 2px 8px 0 rgba(255, 255, 255, 0.4);
  }
}

性能优化留了余地

我在组件中增加了enableGlassEffect开关，当关闭时会降级为扁平化设计：

const flatWrapperClass = enableGlassEffect
  ? wrapperClass
  : `${wrapperClass} bg-[#f8f9ff] dark:bg-zinc-900 backdrop-blur-none`;

这种降级策略在性能敏感的场景下很有用，特别是移动端设备。

总结

LiquidGlass组件的有这么几个特点：

分层思维：复杂效果通过简单层次的叠加实现
SVG滤镜：现代浏览器的SVG滤镜能力真的很强大
渐进增强：提供降级方案保证兼容性
细节打磨：深色模式适配、动画缓动函数，提升用户体验。

说实话，这个组件对与LiquidGlass液态玻璃效果的还原度还是不高的，没有达到我设想的程度。但是这也是在整个开发过程中不断优化、迭代、妥协的结果。现在依然存在很多问题，比如性能问题、Safari不支持的问题等，但是我还会继续寻找更优的解决方案，在保证用户体验的前提下，更加的还原LiquidGlass液态玻璃效果。

好了，今天就分享这些吧，后面我还会分享更多开发过程中的思考和实现。