glassmorphism

毛玻璃效果（磨砂与液态玻璃）

半透明的磨砂 UI：面板可以透视，背景经过模糊后呈现柔和的色彩；明亮的光线边缘勾勒出面板轮廓，层叠阴影让它悬浮起来。2026 年的“液态玻璃”演进加入了折射效果——背景透过面板时会明显弯曲——以及移动的镜面高光。目标是营造深度和材质感，而不只是调整不透明度。

适用场景

• 忙乱或照片背景上的磨砂卡片、导航栏、侧边栏、模态框/对话框和工具栏
• 希望营造层叠于页面之上效果的登录/主视觉面板和叠加层
• Apple 风格的“液态玻璃”主视觉：表面产生折射、缓慢翻涌，并带有一道镜面光扫过
• 玻璃表面的悬停/滚动/进入动效——磨砂感加深、高光变亮、面板抬升
• 任何需要让内容看起来像悬浮的玻璃，同时保持易读的地方

逼真玻璃的四大要素

玻璃绝非单一属性。每个面板都需要具备以下四项，否则看起来就像普通的半透明方框：

1. 磨砂 — 使用 backdrop-filter: blur() 和 saturate()，确保背景色经过模糊后依然鲜明。
2. 半透明 — 使用带 alpha 值的 background（约为 0.08–0.18），既不能完全不透明，也不能完全透明。
3. 玻璃边缘 — 边框要比填充色更亮，最好呈现左上角明亮、右下角渐暗的高光，让边缘能够捕捉光线。
4. 深度 — 使用层叠的 box-shadow：环境投影让面板悬浮起来，再加上 inset 顶部高光和底部阴影，使表面显得圆润。

.glass {
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%); /* Safari needs the prefix */
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.25),     /* float */
    inset 0 1px 0 rgba(255, 255, 255, 0.35), /* top highlight */
    inset 0 -1px 0 rgba(0, 0, 0, 0.12);      /* bottom shade */
}

磨砂强度：轻量级 UI 装饰使用 blur(8–12px) / alpha 0.08–0.14；较重的模态框/登录面板使用 blur(24–40px) / alpha 0.10–0.18。深色玻璃：填充色使用 rgba(0,0,0,0.3)，顶部高光要柔和一些。

**backdrop-filter 只会模糊元素后方的内容。**在纯色背景上，它不会产生可见效果——玻璃效果需要繁杂的背景（图像、渐变、视频）来呈现磨砂质感。

镜面边缘高光与抗色带颗粒

平直的边框毫无生气。通过 ::before 绘制带有明亮角落的遮罩式 1px 圆环，并通过 ::after 叠加淡淡的 feTurbulence 噪点（opacity ≤ 0.06），抖动掉渐变色带（强模糊下出现的阶梯状等高线）。完整的遮罩边框和内联噪点方案见 references/glass-recipes.md。

动效：让玻璃动起来，而不是改变几何形状

为玻璃的质感添加动效——磨砂感加深、高光变亮、面板抬升——让表面看起来像是在“迎向光线”。

.glass {
  transition: backdrop-filter .4s ease, background .4s ease,
              box-shadow .4s ease, transform .4s cubic-bezier(.16,1,.3,1);
}
.glass:hover {
  backdrop-filter: blur(24px) saturate(180%);
  background: rgba(255,255,255,.18);
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.5);
}

• 入场（磨砂感从透明状态逐渐显现）：将 [data-enter] 过渡效果与 @starting-style { backdrop-filter: blur(0); opacity: 0; transform: translateY(16px) } 配合使用。
• 镜面光扫过：在表面上用倾斜的白色渐变制作动效，在悬停时触发，或作为缓慢的环境循环动效。
• 注意事项：为模糊半径添加动效是这里开销最大的操作——每一帧都会重新模糊背景。如果悬停时出现卡顿，可为 transform/box-shadow/background（开销较低）添加动效，并将模糊值的变化幅度控制得很小，或者直接跳变。

液态玻璃 — SVG 折射（2026 年风格）

让背景像透过厚透镜一样在面板中弯曲：使用动态 feTurbulence 驱动 feDisplacementMap，通过 filter 应用（它会扭曲元素自身的像素），并叠加在 backdrop-filter 磨砂效果之上。

<svg width="0" height="0" style="position:absolute"><filter id="liquid-glass">
  <feTurbulence type="fractalNoise" baseFrequency="0.008 0.012" numOctaves="2" seed="3" result="n">
    <animate attributeName="baseFrequency" dur="18s"
             values="0.008 0.012;0.012 0.008;0.008 0.012" repeatCount="indefinite"/>
  </feTurbulence>
  <feDisplacementMap in="SourceGraphic" in2="n" scale="22" xChannelSelector="R" yChannelSelector="G"/>
</filter></svg>

scale = 折射强度（8–14 为轻微，20–30 为明显，>40 为融化般的效果）。baseFrequency 越低，波纹越大、移动越慢（液态感越强）。将 animate 的 dur 设为较长时长（12–20s），让效果缓慢流动。这些滤镜开销很大——只用于一个主视觉元素，不要应用到网格中的多个元素。

性能 — backdrop-filter 开销很大

• 每个玻璃元素都会重新采样并模糊其后方的所有内容。限制元素数量；屏幕上出现十几个元素就会严重拖累滚动 FPS。
• 将开销较大的玻璃元素提升到独立图层（transform: translateZ(0) 或 will-change: transform），并在动效结束后移除 will-change。
• 不要让多个 backdrop-filter 元素彼此叠加——嵌套模糊会再次模糊已经模糊的内容（开销呈平方级增长）。
• 大半径（>40px）并作用于大面积区域时开销最大；应限制半径和面板尺寸。

无障碍 — 不容妥协

玻璃质感只是装饰；内容必须始终清晰易读，而且效果必须可以关闭。

@media (prefers-reduced-transparency: reduce) {
  .glass { background: #1a1a2e; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .glass::after { display: none; }            /* drop grain */
}
@media (prefers-reduced-motion: reduce) {
  .glass { transition: none; }
  .liquid { filter: none; }                   /* stop the refraction churn */
}
@supports not (backdrop-filter: blur(1px)) {
  .glass { background: rgba(30,30,50,.85); }  /* opaque-enough fallback */
}

复杂背景上的对比度：照片上的半透明面板可能会使文本对比度低于 WCAG 要求。在文本下方添加半透明遮罩或渐暗渐变，也可以选择添加 text-shadow: 0 1px 2px rgba(0,0,0,.4)，并确认文本与背景中最亮的区域相比，对比度至少达到正文 4.5:1、大号文本 3:1。

交付与验证（独立 HTML）

打包的辅助脚本（scripts/）：scripts/seek-shot.sh anim.html 0 1.5 3 可冻结 ?t=N 测试页面并截取每个时刻的屏幕截图；scripts/contact-sheet.sh sheet.png frame-*.png 会将这些截图拼成一张图，方便快速检查。参阅 scripts/README.md。

对于自包含的玻璃质感演示（卡片、导航栏、模态框、液态玻璃主视觉），交付内容应当是一个可直接在浏览器中打开的 HTML 文件——包含标记、CSS，以及（如果使用液态玻璃）一个内联 SVG 滤镜，无需构建步骤。对于玻璃质感表面，单文件是合适的方案；不要使用打包工具。面板必须覆盖真实背景（放入照片或渐变），否则就没有可供磨砂处理的内容，演示也会失真。

输出要求：

• 一个 .html 文件：复杂背景、玻璃质感标记、CSS（磨砂效果 + 边缘高光 + 颗粒纹理 + 阴影），以及任何内联 SVG feDisplacementMap 滤镜。
• 提供一种方法，可显示解析完成的状态，也可显示循环效果的冻结帧——玻璃效果需要同时通过状态（静止 / 悬停 / 进入）和时间（扫过 / 折射）的验证。
• 包含以下冻结测试工具，以便固定任意时刻进行检查。

定位测试工具 — 固定确定的状态和帧。 ?state=hover 强制显示悬停效果；?t=N 会在第 N 秒冻结 CSS 动画和 SVG 折射，因此截图会捕获静止且确定的帧：

<script>
  const p = new URLSearchParams(location.search);
  const state = p.get("state");
  if (state) document.documentElement.dataset.state = state;   // CSS keys off :root[data-state="hover"]
  const t = p.get("t");
  if (t !== null) {
    document.getAnimations().forEach(a => { a.currentTime = parseFloat(t)*1000; a.pause(); }); // freeze CSS sweep
    const svg = document.querySelector("svg");
    svg?.pauseAnimations?.(); svg?.setCurrentTime?.(parseFloat(t));                            // freeze refraction
  }
  window.__ready = true;
</script>

验证循环 — 渲染 → 设置状态 / 冻结 → 截图 → 检查： 打开每个有意义的状态（?state=rest、?state=hover）和一帧冻结的循环效果（?t=2），截取屏幕截图，并确认玻璃质感一目了然——模糊和边缘高光清晰可见、没有色带、文本在背景上保持足够的对比度——同时检查异常（背景为纯色导致面板像平面框、Safari 中缺少 -webkit- 前缀、折射过强或呈熔化感、因动画模糊导致卡顿）。然后启用 prefers-reduced-transparency，确认纯色回退样式清晰易读。任何无头工具都可以：

npx playwright screenshot --wait-for-timeout=500 "file://$PWD/glass.html?state=hover" hover.png
npx playwright screenshot --wait-for-timeout=500 "file://$PWD/glass.html?t=2"          loop.png

如需在无头环境中检查回退样式，可模拟媒体特性（例如使用类似 Playwright --color-scheme 的标志，或使用会切换一个类来模拟媒体查询的 ?reduced=1 查询参数），并截屏确认面板为纯色且易读。

完成前请确认：

1. 可独立打开——无控制台错误；玻璃质感面板覆盖的是真实复杂背景，而非纯色。
2. 玻璃质感一目了然——模糊和明亮的边缘高光均清晰可见，分层阴影使面板呈现悬浮感，没有色带（存在颗粒纹理）。
3. 文本与背景最亮部分相比，对比度足够（正文至少 4.5:1）。
4. ?state= / ?t=N 冻结后显示确定且稳定的帧。
5. prefers-reduced-transparency → 纯色不透明面板；prefers-reduced-motion → 停止折射 / 扫过效果；对不支持 backdrop-filter 的情况提供 @supports 回退。
6. 性能合理——限制玻璃质感元素数量，不在卡顿路径上为模糊效果添加动画，液态折射只用于一个元素。

快速参考

需求	方法
基础磨砂效果	backdrop-filter: blur(16px) saturate(160%) + 半透明背景
玻璃边缘	更亮的 border + 带遮罩的 ::before 发光角环
悬浮 / 景深	box-shadow 投影 + inset 顶部高光和底部阴影
消除条带	使用 feTurbulence 噪点 ::after，opacity ≤ .06
悬停动效	为 transform/box-shadow/background 添加过渡，微调模糊值
入场动效	@starting-style { backdrop-filter: blur(0); opacity:0 }
液态折射	通过 filter 使用动画化的 feTurbulence 驱动 feDisplacementMap
镜面光扫	在表面上横向倾斜并移动的白色渐变
Safari	始终配合使用 -webkit-backdrop-filter
降低透明度	使用不透明纯色面板，移除颗粒效果
不支持 backdrop-filter	使用 @supports not (...) 提供足够不透明的回退方案

参考文件

• references/glass-recipes.md — 完整的可直接复制粘贴的配方：分层级的基础玻璃卡片、带遮罩的镜面边缘环、抗条带颗粒效果、悬停/入场/滚动动效、镜面光扫、带调节参数的 SVG feDisplacementMap/feTurbulence 液态玻璃滤镜、性能规则、降低透明度/降低动态效果/@supports 回退方案、对比度防护，以及独立的冻结测试工具。