1实现原理 · 为什么它能做到
可信玻璃由四个成分合成（frost / translucency / edge of glass / depth），缺一就读成普通半透明盒子
skills/glassmorphism/SKILL.md
Glass is never one property. Every panel needs all four, or it reads as a plain translucent box:
注：四成分各配可抄 CSS（backdrop-filter blur 加 saturate、alpha 0.08–0.18、亮边 border、双层 box-shadow），并给轻 UI 8–12px 与重模态 24–40px 的档位。
利用 backdrop-filter 的作用域语义：它只模糊元素背后的内容，所以必须压在真实杂物或渐变背景上，纯色底等于没效果
skills/glassmorphism/SKILL.md
**`backdrop-filter` only blurs content that sits behind the element.** Over a flat background color it does nothing visible — glass needs a busy backdrop (image, gradient, video) to frost.
注：这条同时解释了验收条款：演示必须压在真实背景上，否则演示在撒谎。
细节工艺：亮边用 masked ::before 做单向受光（而非一条平 border），并用 feTurbulence 噪点 ::after 消除重模糊下的色带
skills/glassmorphism/SKILL.md
Draw a masked 1px ring with a lit corner via `::before`, and dither away gradient **banding**
注：噪点 opacity ≤ 0.06，属于看起来没做但实际做了的工艺层；references 给完整配方。
液态玻璃（2026 演进口径）用 SVG 滤镜做折射：动 feTurbulence 驱动 feDisplacementMap，叠在 backdrop-filter 霜面之上
skills/glassmorphism/SKILL.md
<feDisplacementMap in="SourceGraphic" in2="n" scale="22" xChannelSelector="R" yChannelSelector="G"/>
注：给 scale/baseFrequency/dur 三个旋钮的取值区间，并限定只用一块 hero 元素，不要铺网格（滤镜很贵）。
可访问性与性能是硬约束：prefers-reduced-transparency 退成实心面板、prefers-reduced-motion 停折射、无 backdrop-filter 走 @supports 兜底，且文字对比要 ≥4.5:1
skills/glassmorphism/SKILL.md
**Contrast over busy backgrounds**: translucent panels over photos can drop text below WCAG.
注：把玻璃是装饰、内容必须可读写成规则，并要求按背景最亮处核对对比度。
2核心能力
01基础玻璃面板（霜面加半透明填充加亮边加分层阴影，含浅/深两套档位）
02镜面受光边缘（masked ::before 单向亮边）与抗色带噪点（::after feTurbulence）
03玻璃质感动效（hover 加深霜面与亮边、面板抬升、@starting-style 入场、specular sweep）
04SVG 液态玻璃折射滤镜（feTurbulence 驱动 feDisplacementMap，带调参区间）
05三重降级：prefers-reduced-transparency / prefers-reduced-motion / @supports not(backdrop-filter)
06性能纪律（限制玻璃数量、避免嵌套 blur、限制半径与面积、及时撤 will-change）
07状态与时间双冻结 harness（?state=hover 与 ?t=N 同时冻结 CSS 动画与 SVG 折射）
08性能规则在 references 里量化（玻璃数量与滚动 FPS 的关系）
09零 build 交付（单 HTML 加内联 SVG 滤镜，明确不要 bundler）
10可访问性判据：reduced-transparency 退实心、reduced-motion 停折射、文字对比 ≥4.5:1
3外部依赖
| 类型 | 依赖 |
|---|---|
| api | CSS backdrop-filter（Safari 需 -webkit- 前缀）与 prefers-reduced-transparency |
| api | SVG 滤镜原语 feTurbulence / feDisplacementMap（含 SMIL animate 驱动 baseFrequency） |
| network | 无第三方库、无 CDN 依赖（纯 CSS 加内联 SVG；references 的噪点是 data: URI 内联，非网络请求） |
| cli | npx / Playwright（宿主侧截图工具；SKILL.md 在 verify 段示范） |
| cli | scripts/seek-shot.sh + scripts/contact-sheet.sh + ffmpeg（仓库根打包助手，被 Packaged helper 段点名） |
4风险提醒 风险提醒：绿色 · 放心使用
风险提醒：绿色 · 放心使用
- prefers-reduced-transparency 的验收没有可用取证手段（见 second_pass） — 该媒体特性支持面窄（以 Firefox 为主），SKILL.md 却把它列为必过项且未给确定性命令，实际执行极易变成声称已验证。
- 液态玻璃滤镜在低端设备上代价高 — feTurbulence 加 feDisplacementMap 每帧重算，且文档要求叠加 backdrop-filter；只在单元素使用时可控，一旦被复制到网格就会明显掉帧。
- 玻璃面板天然压低文字对比度 — 半透明加重模糊叠在照片上时，正文与背景最亮区的对比可能低于 4.5:1；文档给了 scrim 与 text-shadow 的补救方向，但需逐屏人工核对背景亮度。
- Packaged helper 路径以仓库根为基准，且 references 尾部带 iart.ai utm 推广链 — 单装时 scripts/seek-shot.sh 不可用；references/glass-recipes.md 末行为 iart.ai 推广段（含 utm_term=glassmorphism）。
风险提醒：绿色，放心使用。判级只依据 skill 自身目录（skills/glassmorphism/ = SKILL.md + 0 字节 README.md + references/glass-recipes.md，find 全量核对）：零脚本、零凭证、零执行期外发（token 扫描 fetch(/XMLHttpRequest/curl/wget/child_process/process.env/API_KEY|TOKEN|SECRET/.env/eval( 零命中）、零写盘。全目录 URL 扫描只命中 references 里的 data:image/svg+xml 内联噪点与 iart.ai utm 推广链——前者不是网络请求，后者是 Markdown 链接文本，均非请求指令。交付页的背景图或字体若取自远端属产物期引用，不判级，仅在注意点列出。
5第二遍独立确认
- [ok] backdrop-filter 只能模糊身后内容这一关键前提是否自洽 — SKILL.md 核心段与 references 第 1 节都写明该语义，并据此推出演示必须压在真实杂物背景上；验收第 1 条与之对齐（glass overlaps a real busy backdrop, not a flat color）。
- [unlocatable] prefers-reduced-transparency 的可验证性（正文把它列为必过项） — SKILL.md 要求加载 reduced-transparency 并确认实心兜底可读，但给的建议含糊（Playwright --color-scheme-style flags, or a ?reduced=1 query）——Playwright 并无该媒体特性的专用开关，?reduced=1 需自行在页面实现。全文未给可用的确定性取证命令，故该验收项在源码内不可定位为可行步骤（对比 accessible-animation 用的是真实存在的 --reduced-motion=reduce）。
- [ok] 液态玻璃滤镜的性能告诫是否与实现一致 — 正文说明 filter（不是 backdrop-filter）作用于元素自身像素，需叠在霜面之上；references 第 5 节同样表述，并给 baseFrequency/scale/dur 的调参表与只用一块 hero 的限制，前后一致。
- [discrepancy] Packaged helper 的路径基准 — SKILL.md 写 scripts/seek-shot.sh anim.html 0 1.5 3，但 scripts/ 在仓库根而非本 skill 目录，单装形态下相对路径不成立。
6结论
适合：适合：① 需要在图片、视频或渐变背景上做浮层、卡片、导航栏、模态与工具栏的界面；② 想复刻 Apple liquid glass 观感（折射加流动高光）的 hero 区；③ 需要把玻璃效果做成可降级（reduced-transparency/motion、无 backdrop-filter）的合规实现；④ 想拿一份可直接在浏览器打开、按状态与时间冻结取证的玻璃演示。
不适合：不适合：① 背景是纯色或极简的界面（没有可模糊的内容，效果不成立）；② 大面积、多数元素都要玻璃化的信息密集型界面（性能与可读性双输）；③ 需要严格对比度保证的正文型页面（应改用实心面板）；④ 以低端设备为主的场景（折射滤镜开销大）。
安装 agent 直装可复制
① 本站镜像 更新 2026-09-28
方式 A · 人下载镜像包下载 glassmorphism.tar.gz
sha256:
方式 B · JSON 格式安装指南，复制给 agent282f840f1bf8a217…agent 读 JSON 指南后会自动从本站下载安装，无需更多说明。
② 上游 GitHub · 原始来源
来源信息 GitHub 原始
作者 / 仓库iart-ai / iart-ai/web-animation-skills
原始 GitHubiart-ai/web-animation-skills ↗
Stars28
最近推送2026-06-22
本 skill commit
b6dba3eb75许可MIT（仓库根 LICENSE 为 MIT License, Copyright (c) 2026 iart.ai；.claude-plugin/plugin.json 的 license 字段同为 MIT）
本站信息
收录日期2026-09-06
分类设计
侦查报告AI 侦查 · 2 遍 · 2026-09-06
本站镜像与 GitHub 原始是不同来源：本站锁定 commit 快照经 /r2 分发；GitHub 为实时上游，内容可能已更新。