Liquid Glass 资源包

面向 AI 的设计指南与完整实现方案

1. 设计思路 (Design Concept)

液态玻璃（Liquid Glass）是苹果在 iOS 26 中引入的下一代 UI 语言。它不再是死板的模糊，而是具备物理特性的光学模拟。

物理折射： 利用 SVG 噪点滤镜对背景像素进行位移映射，模拟光线穿过流体时的扭曲感。
多层解耦： 区分滤镜层（扭曲）、遮罩层（色调）、高光层（反射）和内容层（清晰文字）。
动态交互： 监听鼠标或陀螺仪数据，实时更新镜面高光位置，强化玻璃的物理存在感。

2. 实时预览 (Live Preview)

将鼠标移动到下方的卡片上查看动态折射与高光效果：

Liquid Glass

Next-Gen UI Experience

3. 喂给 AI 的提示词 (AI Prompt)

复制以下内容发送给 AI（如 Claude 或 GPT），即可让其生成符合该风格的组件：

"请帮我实现一个基于'液态玻璃 (Liquid Glass)'风格的 UI。要求：1. 使用 HTML/CSS 分层结构（filter, overlay, specular, content）。2. 必须包含一个 SVG 滤镜，利用 feTurbulence 和 feDisplacementMap 实现背景的物理折射扭曲效果。3. 使用 JS 实现跟随鼠标位置的动态 radial-gradient 高光。4. 整体视觉要有极高的通透感和深度感。"

4. 完整源代码 (Full Source Code)

以下是实现该效果的核心代码块，包含关键的 CSS 变量和 SVG 滤镜定义：


/* 核心 CSS 逻辑 */
.glass-container {
    filter: url(#liquid-refraction); /* 引用 SVG 滤镜 */
    backdrop-filter: blur(15px);
}

.specular-layer {
    background: radial-gradient(circle at var(--x) var(--y), white, transparent);
}

/* SVG 滤镜定义 */
<filter id="liquid-refraction">
    <feTurbulence baseFrequency="0.01" numOctaves="2" />
    <feDisplacementMap scale="40" />
</filter>