最近在开发一个需要实现苹果 Liquid Glass液态玻璃UI 效果的项目时发现网上关于如何系统化实现这种高级视觉效果的资料非常零散要么是零碎的 CSS 片段要么是依赖特定框架的复杂方案。这种效果以其独特的模糊、渐变和动态光影质感在提升应用视觉层次和现代感方面效果显著但实现起来往往涉及多个 CSS 新特性的组合与调优。本文将为你完整拆解如何创建一个名为LiquidGlassSkill的 Claude Skill技能其核心目标就是封装一套可复用的、高质量的实现 Apple Liquid Glass UI 样式的代码方案。无论你是前端新手想学习这种酷炫效果还是有一定经验的开发者希望将此类高级 UI 组件化以便在多个项目中快速调用这篇文章都将提供从概念理解、环境搭建、核心代码实现到工程化封装的全流程指南。我们将使用纯 CSS 和少量 JavaScript 来实现确保代码的轻量、高效与可移植性。1. 背景与核心概念什么是 Apple Liquid Glass UI在深入代码之前我们首先要厘清核心概念。Apple Liquid Glass UI 并非苹果官方发布的某个具体 API 或框架而是开发者社区对近年来苹果在其操作系统如 iOS、macOS及官方应用如 Apple Music、系统设置中广泛使用的一种特定视觉设计语言的归纳与命名。1.1 视觉特征解析这种设计语言的核心视觉特征可以概括为以下几点背景模糊与透光感这是最显著的特征。UI 元素如卡片、控制中心、通知中心的背景不是纯色或简单渐变而是带有高级模糊效果如backdrop-filter: blur()的半透明层能隐约透出下层内容营造出类似磨砂玻璃的质感。动态渐变与色彩融合背景色通常不是单一的而是使用复杂的 CSS 线性或径向渐变linear-gradient,radial-gradient并且颜色柔和、过渡自然有时会随着内容或交互状态发生微妙变化。细腻的边框与光泽元素边缘常有极细的、半透明的边框或内发光效果用于在模糊背景下清晰地勾勒出元素边界并模拟玻璃边缘的光泽。这通常通过box-shadow的inset属性或border配合rgba颜色实现。微妙的动态交互反馈在悬停:hover、点击:active或聚焦:focus时玻璃质感可能会有亮度、饱和度或模糊度的轻微变化增强交互的沉浸感和物理真实感。1.2 技术实现基础从技术角度看实现上述效果主要依赖现代 CSS 的几项关键特性backdrop-filter: 这个属性是实现背景模糊的核心。它允许你对元素背后的区域应用图形效果如模糊、饱和度调整。backdrop-filter: blur(10px)就能创造出经典的毛玻璃效果。background与渐变使用background: linear-gradient(...)或background: radial-gradient(...)来创建复杂的、半透明的色彩层叠这是实现“液态”色彩流动感的关键。box-shadow: 用于创建外发光、内阴影和细微的立体边框定义元素的“厚度”和光泽。多层、微妙的box-shadow叠加可以产生非常精致的视觉效果。CSS 自定义属性CSS Variables为了实现主题化、动态调整和更好的可维护性我们将大量使用--primary-color,--blur-intensity这样的自定义属性。理解了这些我们的目标就明确了将上述视觉特征和技术实现封装成一个易于使用、高度可配置的“技能”或“组件库”这就是LiquidGlassSkill。2. 环境准备与项目结构我们的LiquidGlassSkill将以一个独立的、可嵌入任何 Web 项目的样式库的形式存在。它不依赖任何特定的前端框架如 React, Vue确保最大的兼容性。2.1 开发环境要求代码编辑器推荐使用 Visual Studio Code、WebStorm 或任何你熟悉的前端编辑器。现代浏览器由于使用了backdrop-filter等较新的 CSS 特性请确保使用 Chrome 76、Firefox 103、Safari 9 或 Edge 79 进行开发和测试。部分属性可能需要浏览器前缀。本地服务器可选但推荐为了测试某些涉及路径或 CORS 的样式建议在本地运行一个简单的 HTTP 服务器。可以使用 VS Code 的 Live Server 插件或在项目根目录运行npx serve .或python -m http.server 8000。2.2 项目初始化与结构首先创建一个干净的项目目录。mkdir liquid-glass-skill cd liquid-glass-skill我们建议采用以下项目结构这有助于代码的组织和未来的扩展liquid-glass-skill/ ├── index.html # 主演示页面 ├── README.md # 项目说明文档 ├── package.json # 可选npm项目配置 ├── src/ │ ├── styles/ │ │ ├── base.css # 基础重置和变量定义 │ │ ├── components/ # 组件样式 │ │ │ ├── glass-card.css │ │ │ ├── glass-button.css │ │ │ └── glass-input.css │ │ └── themes/ # 主题样式 │ │ ├── light.css │ │ └── dark.css │ └── scripts/ │ └── theme-switcher.js # 可选主题切换脚本 └── dist/ # 构建输出目录用于发布 ├── liquid-glass-skill.css └── liquid-glass-skill.min.css这个结构清晰地将基础变量、组件样式和主题分离。对于初学者或快速原型你可以从一个简单的style.css文件开始。但在本文中我们将按照这个结构来构建以展示工程化的最佳实践。3. 核心实现定义基础变量与 Glass 混合一切效果的起点是定义一套统一的设计变量Design Tokens和一个可复用的“玻璃”混合Mixin或类。3.1 创建基础变量 (src/styles/base.css)这个文件定义了整个技能库的视觉基础。/* src/styles/base.css */ :root { /* 色彩系统 - 浅色主题 (默认) */ --lg-color-background: #f5f7fa; --lg-color-surface: rgba(255, 255, 255, 0.7); --lg-color-surface-solid: #ffffff; --lg-color-primary: #007aff; /* 苹果风格蓝色 */ --lg-color-primary-light: rgba(0, 122, 255, 0.1); --lg-color-text: #1d1d1f; --lg-color-text-secondary: #86868b; /* 玻璃效果参数 */ --lg-blur-intensity: 10px; --lg-border-radius: 12px; --lg-border-width: 1px; --lg-border-color: rgba(255, 255, 255, 0.2); --lg-shadow-color: rgba(0, 0, 0, 0.05); --lg-shadow-elevation-low: 0 2px 10px var(--lg-shadow-color); --lg-shadow-elevation-medium: 0 8px 30px var(--lg-shadow-color); /* 过渡动画 */ --lg-transition-duration: 0.3s; --lg-transition-timing: cubic-bezier(0.4, 0, 0.2, 1); } /* 深色主题变量 - 通过类名切换 */ .theme-dark { --lg-color-background: #000000; --lg-color-surface: rgba(28, 28, 30, 0.7); --lg-color-surface-solid: #1c1c1e; --lg-color-primary: #0a84ff; --lg-color-primary-light: rgba(10, 132, 255, 0.15); --lg-color-text: #f5f5f7; --lg-color-text-secondary: #98989d; --lg-border-color: rgba(255, 255, 255, 0.1); --lg-shadow-color: rgba(0, 0, 0, 0.3); } /* 基础重置 */ * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif; background-color: var(--lg-color-background); color: var(--lg-color-text); line-height: 1.5; transition: background-color var(--lg-transition-duration) var(--lg-transition-timing); min-height: 100vh; padding: 20px; }3.2 创建核心的 Glass Mixin/Utility Class我们创建一个通用的.glass类任何想具备液态玻璃效果的元素都可以应用它。我们将效果集中定义在这里。/* src/styles/components/_glass-base.css */ .glass { /* 核心背景与模糊 */ background: var(--lg-color-surface); backdrop-filter: blur(var(--lg-blur-intensity)) saturate(180%); -webkit-backdrop-filter: blur(var(--lg-blur-intensity)) saturate(180%); /* Safari 支持 */ /* 边框与轮廓 */ border-radius: var(--lg-border-radius); border: var(--lg-border-width) solid var(--lg-border-color); /* 阴影外阴影定义深度内阴影增强玻璃边缘光泽 */ box-shadow: var(--lg-shadow-elevation-medium), inset 0 1px 0 rgba(255, 255, 255, 0.1); /* 上边缘内发光 */ /* 确保内容可读性 */ color: var(--lg-color-text); /* 平滑过渡 */ transition: all var(--lg-transition-duration) var(--lg-transition-timing); } /* 交互状态 */ .glass:hover { background: rgba(var(--lg-color-surface), 0.85); /* 悬停时稍微更不透明 */ box-shadow: var(--lg-shadow-elevation-medium), inset 0 1px 0 rgba(255, 255, 255, 0.15); } .glass:active { background: rgba(var(--lg-color-surface), 0.9); transform: scale(0.995); /* 轻微的按压感 */ }关键点解释backdrop-filter: blur(...) saturate(...):blur创造模糊saturate增加饱和度让透过的色彩更鲜艳这是苹果风格的一个小技巧。-webkit-backdrop-filter: 为 Safari 浏览器提供前缀支持至关重要。box-shadow的多层设置第一层是外阴影创造悬浮感第二层是inset内阴影模拟玻璃上边缘被光照亮的高光这是实现“玻璃感”的精髓之一。transition: 让所有属性的变化背景、阴影、变换都有平滑的动画增强交互的细腻度。4. 完整实战构建可复用的 UI 组件有了基础类我们就可以构建具体的 UI 组件了。我们以Glass Card和Glass Button为例。4.1 Glass Card 组件 (src/styles/components/glass-card.css)卡片是展示这种效果的绝佳容器。/* src/styles/components/glass-card.css */ .glass-card { composes: glass; /* 如果使用 CSS Modules 或 PostCSS。这里我们直接扩展 */ /* 直接使用 .glass 类并添加卡片特定样式 */ padding: 24px; max-width: 400px; margin: 20px auto; } .glass-card__header { display: flex; align-items: center; margin-bottom: 16px; } .glass-card__icon { width: 40px; height: 40px; border-radius: 8px; background: var(--lg-color-primary-light); display: flex; align-items: center; justify-content: center; margin-right: 12px; font-size: 20px; } .glass-card__title { font-size: 20px; font-weight: 600; color: var(--lg-color-text); } .glass-card__subtitle { font-size: 14px; color: var(--lg-color-text-secondary); margin-top: 4px; } .glass-card__body { font-size: 15px; line-height: 1.6; color: var(--lg-color-text); opacity: 0.9; } .glass-card__footer { margin-top: 20px; display: flex; justify-content: flex-end; gap: 12px; }4.2 Glass Button 组件 (src/styles/components/glass-button.css)按钮需要更强调交互反馈。/* src/styles/components/glass-button.css */ .glass-button { composes: glass; /* 继承基础玻璃效果 */ display: inline-flex; align-items: center; justify-content: center; padding: 12px 24px; font-size: 16px; font-weight: 500; text-decoration: none; cursor: pointer; border: none; /* 覆盖 .glass 的 border我们使用 box-shadow 做边框 */ background: var(--lg-color-primary); /* 主色背景 */ color: white; backdrop-filter: blur(var(--lg-blur-intensity)) saturate(180%); -webkit-backdrop-filter: blur(var(--lg-blur-intensity)) saturate(180%); box-shadow: 0 4px 14px rgba(var(--lg-color-primary), 0.4), /* 使用主色的阴影 */ inset 0 1px 0 rgba(255, 255, 255, 0.2); transition: all var(--lg-transition-duration) var(--lg-transition-timing); } .glass-button:hover { background: rgba(var(--lg-color-primary), 0.9); box-shadow: 0 6px 20px rgba(var(--lg-color-primary), 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.25); transform: translateY(-1px); } .glass-button:active { background: rgba(var(--lg-color-primary), 0.95); box-shadow: 0 2px 8px rgba(var(--lg-color-primary), 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15); transform: translateY(0); } .glass-button--secondary { background: var(--lg-color-surface); color: var(--lg-color-text); box-shadow: var(--lg-shadow-elevation-low), inset 0 1px 0 rgba(255, 255, 255, 0.1); } .glass-button--secondary:hover { background: rgba(var(--lg-color-surface), 0.85); }4.3 整合样式并创建演示页面 (index.html)现在我们将所有样式文件链接起来并创建一个 HTML 页面来展示我们的组件。!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleLiquidGlassSkill 演示/title link relstylesheet hrefsrc/styles/base.css link relstylesheet hrefsrc/styles/components/_glass-base.css link relstylesheet hrefsrc/styles/components/glass-card.css link relstylesheet hrefsrc/styles/components/glass-button.css link relstylesheet hrefsrc/styles/themes/light.css !-- 当前为浅色主题 -- style .demo-container { max-width: 1200px; margin: 0 auto; padding: 40px 20px; display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 30px; } .theme-switcher { position: fixed; top: 20px; right: 20px; z-index: 1000; } /style /head body class !-- 初始为空用于切换主题 -- div classtheme-switcher button idthemeToggle classglass-button glass-button--secondary切换深色模式/button /div div classdemo-container !-- 卡片示例 1 -- div classglass-card div classglass-card__header div classglass-card__icon/div div h2 classglass-card__title液态玻璃卡片/h2 p classglass-card__subtitleApple 风格 UI 组件/p /div /div div classglass-card__body p这是一个使用纯 CSS 实现的 Liquid Glass 效果卡片。它模拟了 iOS 和 macOS 系统中常见的毛玻璃质感背景模糊、色彩通透并带有细腻的边框光泽。/p p尝试将鼠标悬停在卡片或按钮上感受平滑的交互反馈。/p /div div classglass-card__footer button classglass-button glass-button--secondary了解更多/button button classglass-button立即体验/button /div /div !-- 卡片示例 2 -- div classglass-card div classglass-card__header div classglass-card__icon⚙️/div div h2 classglass-card__title可定制化参数/h2 p classglass-card__subtitle通过 CSS 变量控制/p /div /div div classglass-card__body p所有视觉效果都通过 CSS 自定义属性变量控制例如/p ul stylemargin-top: 10px; padding-left: 20px; licode--lg-blur-intensity/code: 控制背景模糊程度。/li licode--lg-color-surface/code: 控制玻璃表面颜色和透明度。/li licode--lg-border-radius/code: 控制圆角大小。/li /ul p只需修改根元素:root下的变量值即可全局切换主题或调整风格。/p /div div classglass-card__footer button classglass-button onclickalert(功能演示)调整模糊度/button /div /div /div script srcsrc/scripts/theme-switcher.js/script script // 简单的主题切换脚本 document.getElementById(themeToggle).addEventListener(click, function() { document.body.classList.toggle(theme-dark); this.textContent document.body.classList.contains(theme-dark) ? 切换浅色模式 : 切换深色模式; }); /script /body /html4.4 创建主题切换脚本 (src/scripts/theme-switcher.js)这是一个简单的脚本用于演示如何动态切换主题。在实际项目中你可能需要更复杂的状态管理。// src/scripts/theme-switcher.js (function() { use strict; const ThemeManager { init() { this.toggleBtn document.getElementById(themeToggle); if (!this.toggleBtn) return; // 检查本地存储或系统偏好 const savedTheme localStorage.getItem(lg-theme); const prefersDark window.matchMedia((prefers-color-scheme: dark)).matches; if (savedTheme dark || (!savedTheme prefersDark)) { this.enableDarkTheme(); } this.toggleBtn.addEventListener(click, () this.toggleTheme()); }, enableDarkTheme() { document.body.classList.add(theme-dark); this.updateButtonText(dark); localStorage.setItem(lg-theme, dark); }, enableLightTheme() { document.body.classList.remove(theme-dark); this.updateButtonText(light); localStorage.setItem(lg-theme, light); }, toggleTheme() { if (document.body.classList.contains(theme-dark)) { this.enableLightTheme(); } else { this.enableDarkTheme(); } }, updateButtonText(theme) { if (this.toggleBtn) { this.toggleBtn.textContent theme dark ? 切换浅色模式 : 切换深色模式; } } }; // 当 DOM 加载完成后初始化 if (document.readyState loading) { document.addEventListener(DOMContentLoaded, () ThemeManager.init()); } else { ThemeManager.init(); } })();5. 常见问题与排查思路在实现和使用LiquidGlassSkill时你可能会遇到以下问题问题现象可能原因解决思路背景模糊效果完全不显示1. 浏览器不支持backdrop-filter。2. 元素或其祖先元素设置了transform、filter等创建了新的层叠上下文或裁剪了内容。3. 元素的background是完全不透明的。1. 检查 Can I use 确认浏览器兼容性并确保添加了-webkit-前缀。2. 尝试为元素添加isolation: isolate;属性或检查祖先元素的overflow: hidden。3. 确保background颜色使用rgba()或hsla()并带有透明度如rgba(255,255,255,0.7)。模糊区域边缘有奇怪的锯齿或颜色溢出backdrop-filter的模糊区域计算受元素border-radius和浏览器渲染引擎影响。1. 为元素添加overflow: hidden;如果内容不需要溢出。2. 尝试使用clip-path配合相同的border-radius进行裁剪clip-path: inset(0 round var(--lg-border-radius));。3. 稍微减少blur()的值。性能问题滚动或动画卡顿backdrop-filter是 GPU 加速的但大面积或过量使用仍可能导致性能下降。1.谨慎使用仅在关键视觉元素如导航栏、模态框、卡片上使用。2.减少模糊半径在移动设备上尝试将--lg-blur-intensity从10px降低到5px或8px。3.使用will-change: backdrop-filter谨慎使用可能引发其他问题。4. 考虑在低端设备上通过媒体查询回退到半透明背景而不模糊。深色/浅色主题切换时颜色不更新1. CSS 变量定义在错误的层级或选择器下。2. JavaScript 切换主题类名时类名未正确应用到body或根元素。3. 某些颜色值写死了没有使用 CSS 变量。1. 确保深色主题变量定义在.theme-dark类下且该类被应用到body或:root。2. 检查 JS 切换逻辑使用classList.toggle/add/remove确认。3. 全局搜索样式文件将所有颜色值替换为对应的 CSS 变量如var(--lg-color-text)。按钮点击态:active在移动端不灵敏移动端浏览器对:active状态的处理有时有延迟或需要触摸开始事件。1. 为触摸设备添加一个.active类通过 JS 在touchstart和touchend事件中动态添加/移除。2. 确保:active样式有足够明显的视觉变化如transform: scale(0.98)。6. 最佳实践与工程化建议将LiquidGlassSkill从一个演示项目变成可投入生产的技能或组件库需要考虑以下几点6.1 样式封装与构建使用 CSS 预处理器考虑使用 Sass 或 Less 来管理变量、混合宏和嵌套规则这能让代码更易维护。例如将.glass混合宏定义为mixin glass-effect { ... }。采用 CSS-in-JS 或 CSS Modules如果你在 React、Vue 等框架中使用可以考虑使用 Styled-components、Emotion 或 Vue 的style scoped将样式与组件逻辑紧密绑定避免全局污染。构建与打包使用 PostCSS配合 Autoprefixer 自动添加浏览器前缀和打包工具如 Webpack, Vite, Parcel来处理你的样式文件最终输出压缩后的dist/liquid-glass-skill.css供其他项目引用。6.2 可访问性 (A11y) 考虑炫酷的 UI 不能以牺牲可访问性为代价。颜色对比度确保玻璃背景上的文字与背景有足够的对比度WCAG AA 标准建议至少 4.5:1。可以使用在线工具检查。在深色主题下尤其要注意。焦点指示器为可交互元素按钮、输入框提供清晰可见的:focus样式不要用outline: none完全移除它可以将其设计得与你的玻璃风格协调。减少运动对于前庭障碍用户可以考虑使用media (prefers-reduced-motion: reduce)媒体查询来减少或移除过渡动画。6.3 性能优化分层与合成浏览器将应用了backdrop-filter的元素提升到独立的合成层。避免过度使用以免创建过多图层消耗内存。备用方案 (Fallback)为不支持backdrop-filter的浏览器如旧版 Firefox提供优雅降级。可以使用supports规则。.glass { background: var(--lg-color-surface-solid); /* 备用纯色背景 */ } supports (backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px)) { .glass { background: var(--lg-color-surface); /* 支持时使用半透明背景 */ backdrop-filter: blur(var(--lg-blur-intensity)) saturate(180%); -webkit-backdrop-filter: blur(var(--lg-blur-intensity)) saturate(180%); } }6.4 与设计系统集成定义 Design Tokens就像我们在base.css里做的那样将所有颜色、间距、圆角、阴影等定义为 CSS 变量。这为整个项目的视觉一致性打下基础。创建组件变体除了基础的.glass-card可以创建.glass-card--compact紧凑、.glass-card--elevated更高阴影等变体类。文档化为你的LiquidGlassSkill创建详细的文档说明如何安装、使用、定制变量以及不同组件的 API。通过以上步骤你已经成功创建了一个具备 Apple Liquid Glass 视觉风格的、可复用的前端技能库。从核心的 CSS 实现到完整的组件示例再到性能、可访问性和工程化的考量这套方案为你提供了在现代 Web 项目中应用这种高级 UI 效果的完整路径。你可以直接使用这些代码也可以根据你的设计系统进行定制和扩展。
最近在开发一个需要实现苹果 Liquid Glass液态玻璃UI 效果的项目时发现网上关于如何系统化实现这种高级视觉效果的资料非常零散要么是零碎的 CSS 片段要么是依赖特定框架的复杂方案。这种效果以其独特的模糊、渐变和动态光影质感在提升应用视觉层次和现代感方面效果显著但实现起来往往涉及多个 CSS 新特性的组合与调优。本文将为你完整拆解如何创建一个名为LiquidGlassSkill的 Claude Skill技能其核心目标就是封装一套可复用的、高质量的实现 Apple Liquid Glass UI 样式的代码方案。无论你是前端新手想学习这种酷炫效果还是有一定经验的开发者希望将此类高级 UI 组件化以便在多个项目中快速调用这篇文章都将提供从概念理解、环境搭建、核心代码实现到工程化封装的全流程指南。我们将使用纯 CSS 和少量 JavaScript 来实现确保代码的轻量、高效与可移植性。1. 背景与核心概念什么是 Apple Liquid Glass UI在深入代码之前我们首先要厘清核心概念。Apple Liquid Glass UI 并非苹果官方发布的某个具体 API 或框架而是开发者社区对近年来苹果在其操作系统如 iOS、macOS及官方应用如 Apple Music、系统设置中广泛使用的一种特定视觉设计语言的归纳与命名。1.1 视觉特征解析这种设计语言的核心视觉特征可以概括为以下几点背景模糊与透光感这是最显著的特征。UI 元素如卡片、控制中心、通知中心的背景不是纯色或简单渐变而是带有高级模糊效果如backdrop-filter: blur()的半透明层能隐约透出下层内容营造出类似磨砂玻璃的质感。动态渐变与色彩融合背景色通常不是单一的而是使用复杂的 CSS 线性或径向渐变linear-gradient,radial-gradient并且颜色柔和、过渡自然有时会随着内容或交互状态发生微妙变化。细腻的边框与光泽元素边缘常有极细的、半透明的边框或内发光效果用于在模糊背景下清晰地勾勒出元素边界并模拟玻璃边缘的光泽。这通常通过box-shadow的inset属性或border配合rgba颜色实现。微妙的动态交互反馈在悬停:hover、点击:active或聚焦:focus时玻璃质感可能会有亮度、饱和度或模糊度的轻微变化增强交互的沉浸感和物理真实感。1.2 技术实现基础从技术角度看实现上述效果主要依赖现代 CSS 的几项关键特性backdrop-filter: 这个属性是实现背景模糊的核心。它允许你对元素背后的区域应用图形效果如模糊、饱和度调整。backdrop-filter: blur(10px)就能创造出经典的毛玻璃效果。background与渐变使用background: linear-gradient(...)或background: radial-gradient(...)来创建复杂的、半透明的色彩层叠这是实现“液态”色彩流动感的关键。box-shadow: 用于创建外发光、内阴影和细微的立体边框定义元素的“厚度”和光泽。多层、微妙的box-shadow叠加可以产生非常精致的视觉效果。CSS 自定义属性CSS Variables为了实现主题化、动态调整和更好的可维护性我们将大量使用--primary-color,--blur-intensity这样的自定义属性。理解了这些我们的目标就明确了将上述视觉特征和技术实现封装成一个易于使用、高度可配置的“技能”或“组件库”这就是LiquidGlassSkill。2. 环境准备与项目结构我们的LiquidGlassSkill将以一个独立的、可嵌入任何 Web 项目的样式库的形式存在。它不依赖任何特定的前端框架如 React, Vue确保最大的兼容性。2.1 开发环境要求代码编辑器推荐使用 Visual Studio Code、WebStorm 或任何你熟悉的前端编辑器。现代浏览器由于使用了backdrop-filter等较新的 CSS 特性请确保使用 Chrome 76、Firefox 103、Safari 9 或 Edge 79 进行开发和测试。部分属性可能需要浏览器前缀。本地服务器可选但推荐为了测试某些涉及路径或 CORS 的样式建议在本地运行一个简单的 HTTP 服务器。可以使用 VS Code 的 Live Server 插件或在项目根目录运行npx serve .或python -m http.server 8000。2.2 项目初始化与结构首先创建一个干净的项目目录。mkdir liquid-glass-skill cd liquid-glass-skill我们建议采用以下项目结构这有助于代码的组织和未来的扩展liquid-glass-skill/ ├── index.html # 主演示页面 ├── README.md # 项目说明文档 ├── package.json # 可选npm项目配置 ├── src/ │ ├── styles/ │ │ ├── base.css # 基础重置和变量定义 │ │ ├── components/ # 组件样式 │ │ │ ├── glass-card.css │ │ │ ├── glass-button.css │ │ │ └── glass-input.css │ │ └── themes/ # 主题样式 │ │ ├── light.css │ │ └── dark.css │ └── scripts/ │ └── theme-switcher.js # 可选主题切换脚本 └── dist/ # 构建输出目录用于发布 ├── liquid-glass-skill.css └── liquid-glass-skill.min.css这个结构清晰地将基础变量、组件样式和主题分离。对于初学者或快速原型你可以从一个简单的style.css文件开始。但在本文中我们将按照这个结构来构建以展示工程化的最佳实践。3. 核心实现定义基础变量与 Glass 混合一切效果的起点是定义一套统一的设计变量Design Tokens和一个可复用的“玻璃”混合Mixin或类。3.1 创建基础变量 (src/styles/base.css)这个文件定义了整个技能库的视觉基础。/* src/styles/base.css */ :root { /* 色彩系统 - 浅色主题 (默认) */ --lg-color-background: #f5f7fa; --lg-color-surface: rgba(255, 255, 255, 0.7); --lg-color-surface-solid: #ffffff; --lg-color-primary: #007aff; /* 苹果风格蓝色 */ --lg-color-primary-light: rgba(0, 122, 255, 0.1); --lg-color-text: #1d1d1f; --lg-color-text-secondary: #86868b; /* 玻璃效果参数 */ --lg-blur-intensity: 10px; --lg-border-radius: 12px; --lg-border-width: 1px; --lg-border-color: rgba(255, 255, 255, 0.2); --lg-shadow-color: rgba(0, 0, 0, 0.05); --lg-shadow-elevation-low: 0 2px 10px var(--lg-shadow-color); --lg-shadow-elevation-medium: 0 8px 30px var(--lg-shadow-color); /* 过渡动画 */ --lg-transition-duration: 0.3s; --lg-transition-timing: cubic-bezier(0.4, 0, 0.2, 1); } /* 深色主题变量 - 通过类名切换 */ .theme-dark { --lg-color-background: #000000; --lg-color-surface: rgba(28, 28, 30, 0.7); --lg-color-surface-solid: #1c1c1e; --lg-color-primary: #0a84ff; --lg-color-primary-light: rgba(10, 132, 255, 0.15); --lg-color-text: #f5f5f7; --lg-color-text-secondary: #98989d; --lg-border-color: rgba(255, 255, 255, 0.1); --lg-shadow-color: rgba(0, 0, 0, 0.3); } /* 基础重置 */ * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif; background-color: var(--lg-color-background); color: var(--lg-color-text); line-height: 1.5; transition: background-color var(--lg-transition-duration) var(--lg-transition-timing); min-height: 100vh; padding: 20px; }3.2 创建核心的 Glass Mixin/Utility Class我们创建一个通用的.glass类任何想具备液态玻璃效果的元素都可以应用它。我们将效果集中定义在这里。/* src/styles/components/_glass-base.css */ .glass { /* 核心背景与模糊 */ background: var(--lg-color-surface); backdrop-filter: blur(var(--lg-blur-intensity)) saturate(180%); -webkit-backdrop-filter: blur(var(--lg-blur-intensity)) saturate(180%); /* Safari 支持 */ /* 边框与轮廓 */ border-radius: var(--lg-border-radius); border: var(--lg-border-width) solid var(--lg-border-color); /* 阴影外阴影定义深度内阴影增强玻璃边缘光泽 */ box-shadow: var(--lg-shadow-elevation-medium), inset 0 1px 0 rgba(255, 255, 255, 0.1); /* 上边缘内发光 */ /* 确保内容可读性 */ color: var(--lg-color-text); /* 平滑过渡 */ transition: all var(--lg-transition-duration) var(--lg-transition-timing); } /* 交互状态 */ .glass:hover { background: rgba(var(--lg-color-surface), 0.85); /* 悬停时稍微更不透明 */ box-shadow: var(--lg-shadow-elevation-medium), inset 0 1px 0 rgba(255, 255, 255, 0.15); } .glass:active { background: rgba(var(--lg-color-surface), 0.9); transform: scale(0.995); /* 轻微的按压感 */ }关键点解释backdrop-filter: blur(...) saturate(...):blur创造模糊saturate增加饱和度让透过的色彩更鲜艳这是苹果风格的一个小技巧。-webkit-backdrop-filter: 为 Safari 浏览器提供前缀支持至关重要。box-shadow的多层设置第一层是外阴影创造悬浮感第二层是inset内阴影模拟玻璃上边缘被光照亮的高光这是实现“玻璃感”的精髓之一。transition: 让所有属性的变化背景、阴影、变换都有平滑的动画增强交互的细腻度。4. 完整实战构建可复用的 UI 组件有了基础类我们就可以构建具体的 UI 组件了。我们以Glass Card和Glass Button为例。4.1 Glass Card 组件 (src/styles/components/glass-card.css)卡片是展示这种效果的绝佳容器。/* src/styles/components/glass-card.css */ .glass-card { composes: glass; /* 如果使用 CSS Modules 或 PostCSS。这里我们直接扩展 */ /* 直接使用 .glass 类并添加卡片特定样式 */ padding: 24px; max-width: 400px; margin: 20px auto; } .glass-card__header { display: flex; align-items: center; margin-bottom: 16px; } .glass-card__icon { width: 40px; height: 40px; border-radius: 8px; background: var(--lg-color-primary-light); display: flex; align-items: center; justify-content: center; margin-right: 12px; font-size: 20px; } .glass-card__title { font-size: 20px; font-weight: 600; color: var(--lg-color-text); } .glass-card__subtitle { font-size: 14px; color: var(--lg-color-text-secondary); margin-top: 4px; } .glass-card__body { font-size: 15px; line-height: 1.6; color: var(--lg-color-text); opacity: 0.9; } .glass-card__footer { margin-top: 20px; display: flex; justify-content: flex-end; gap: 12px; }4.2 Glass Button 组件 (src/styles/components/glass-button.css)按钮需要更强调交互反馈。/* src/styles/components/glass-button.css */ .glass-button { composes: glass; /* 继承基础玻璃效果 */ display: inline-flex; align-items: center; justify-content: center; padding: 12px 24px; font-size: 16px; font-weight: 500; text-decoration: none; cursor: pointer; border: none; /* 覆盖 .glass 的 border我们使用 box-shadow 做边框 */ background: var(--lg-color-primary); /* 主色背景 */ color: white; backdrop-filter: blur(var(--lg-blur-intensity)) saturate(180%); -webkit-backdrop-filter: blur(var(--lg-blur-intensity)) saturate(180%); box-shadow: 0 4px 14px rgba(var(--lg-color-primary), 0.4), /* 使用主色的阴影 */ inset 0 1px 0 rgba(255, 255, 255, 0.2); transition: all var(--lg-transition-duration) var(--lg-transition-timing); } .glass-button:hover { background: rgba(var(--lg-color-primary), 0.9); box-shadow: 0 6px 20px rgba(var(--lg-color-primary), 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.25); transform: translateY(-1px); } .glass-button:active { background: rgba(var(--lg-color-primary), 0.95); box-shadow: 0 2px 8px rgba(var(--lg-color-primary), 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15); transform: translateY(0); } .glass-button--secondary { background: var(--lg-color-surface); color: var(--lg-color-text); box-shadow: var(--lg-shadow-elevation-low), inset 0 1px 0 rgba(255, 255, 255, 0.1); } .glass-button--secondary:hover { background: rgba(var(--lg-color-surface), 0.85); }4.3 整合样式并创建演示页面 (index.html)现在我们将所有样式文件链接起来并创建一个 HTML 页面来展示我们的组件。!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleLiquidGlassSkill 演示/title link relstylesheet hrefsrc/styles/base.css link relstylesheet hrefsrc/styles/components/_glass-base.css link relstylesheet hrefsrc/styles/components/glass-card.css link relstylesheet hrefsrc/styles/components/glass-button.css link relstylesheet hrefsrc/styles/themes/light.css !-- 当前为浅色主题 -- style .demo-container { max-width: 1200px; margin: 0 auto; padding: 40px 20px; display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 30px; } .theme-switcher { position: fixed; top: 20px; right: 20px; z-index: 1000; } /style /head body class !-- 初始为空用于切换主题 -- div classtheme-switcher button idthemeToggle classglass-button glass-button--secondary切换深色模式/button /div div classdemo-container !-- 卡片示例 1 -- div classglass-card div classglass-card__header div classglass-card__icon/div div h2 classglass-card__title液态玻璃卡片/h2 p classglass-card__subtitleApple 风格 UI 组件/p /div /div div classglass-card__body p这是一个使用纯 CSS 实现的 Liquid Glass 效果卡片。它模拟了 iOS 和 macOS 系统中常见的毛玻璃质感背景模糊、色彩通透并带有细腻的边框光泽。/p p尝试将鼠标悬停在卡片或按钮上感受平滑的交互反馈。/p /div div classglass-card__footer button classglass-button glass-button--secondary了解更多/button button classglass-button立即体验/button /div /div !-- 卡片示例 2 -- div classglass-card div classglass-card__header div classglass-card__icon⚙️/div div h2 classglass-card__title可定制化参数/h2 p classglass-card__subtitle通过 CSS 变量控制/p /div /div div classglass-card__body p所有视觉效果都通过 CSS 自定义属性变量控制例如/p ul stylemargin-top: 10px; padding-left: 20px; licode--lg-blur-intensity/code: 控制背景模糊程度。/li licode--lg-color-surface/code: 控制玻璃表面颜色和透明度。/li licode--lg-border-radius/code: 控制圆角大小。/li /ul p只需修改根元素:root下的变量值即可全局切换主题或调整风格。/p /div div classglass-card__footer button classglass-button onclickalert(功能演示)调整模糊度/button /div /div /div script srcsrc/scripts/theme-switcher.js/script script // 简单的主题切换脚本 document.getElementById(themeToggle).addEventListener(click, function() { document.body.classList.toggle(theme-dark); this.textContent document.body.classList.contains(theme-dark) ? 切换浅色模式 : 切换深色模式; }); /script /body /html4.4 创建主题切换脚本 (src/scripts/theme-switcher.js)这是一个简单的脚本用于演示如何动态切换主题。在实际项目中你可能需要更复杂的状态管理。// src/scripts/theme-switcher.js (function() { use strict; const ThemeManager { init() { this.toggleBtn document.getElementById(themeToggle); if (!this.toggleBtn) return; // 检查本地存储或系统偏好 const savedTheme localStorage.getItem(lg-theme); const prefersDark window.matchMedia((prefers-color-scheme: dark)).matches; if (savedTheme dark || (!savedTheme prefersDark)) { this.enableDarkTheme(); } this.toggleBtn.addEventListener(click, () this.toggleTheme()); }, enableDarkTheme() { document.body.classList.add(theme-dark); this.updateButtonText(dark); localStorage.setItem(lg-theme, dark); }, enableLightTheme() { document.body.classList.remove(theme-dark); this.updateButtonText(light); localStorage.setItem(lg-theme, light); }, toggleTheme() { if (document.body.classList.contains(theme-dark)) { this.enableLightTheme(); } else { this.enableDarkTheme(); } }, updateButtonText(theme) { if (this.toggleBtn) { this.toggleBtn.textContent theme dark ? 切换浅色模式 : 切换深色模式; } } }; // 当 DOM 加载完成后初始化 if (document.readyState loading) { document.addEventListener(DOMContentLoaded, () ThemeManager.init()); } else { ThemeManager.init(); } })();5. 常见问题与排查思路在实现和使用LiquidGlassSkill时你可能会遇到以下问题问题现象可能原因解决思路背景模糊效果完全不显示1. 浏览器不支持backdrop-filter。2. 元素或其祖先元素设置了transform、filter等创建了新的层叠上下文或裁剪了内容。3. 元素的background是完全不透明的。1. 检查 Can I use 确认浏览器兼容性并确保添加了-webkit-前缀。2. 尝试为元素添加isolation: isolate;属性或检查祖先元素的overflow: hidden。3. 确保background颜色使用rgba()或hsla()并带有透明度如rgba(255,255,255,0.7)。模糊区域边缘有奇怪的锯齿或颜色溢出backdrop-filter的模糊区域计算受元素border-radius和浏览器渲染引擎影响。1. 为元素添加overflow: hidden;如果内容不需要溢出。2. 尝试使用clip-path配合相同的border-radius进行裁剪clip-path: inset(0 round var(--lg-border-radius));。3. 稍微减少blur()的值。性能问题滚动或动画卡顿backdrop-filter是 GPU 加速的但大面积或过量使用仍可能导致性能下降。1.谨慎使用仅在关键视觉元素如导航栏、模态框、卡片上使用。2.减少模糊半径在移动设备上尝试将--lg-blur-intensity从10px降低到5px或8px。3.使用will-change: backdrop-filter谨慎使用可能引发其他问题。4. 考虑在低端设备上通过媒体查询回退到半透明背景而不模糊。深色/浅色主题切换时颜色不更新1. CSS 变量定义在错误的层级或选择器下。2. JavaScript 切换主题类名时类名未正确应用到body或根元素。3. 某些颜色值写死了没有使用 CSS 变量。1. 确保深色主题变量定义在.theme-dark类下且该类被应用到body或:root。2. 检查 JS 切换逻辑使用classList.toggle/add/remove确认。3. 全局搜索样式文件将所有颜色值替换为对应的 CSS 变量如var(--lg-color-text)。按钮点击态:active在移动端不灵敏移动端浏览器对:active状态的处理有时有延迟或需要触摸开始事件。1. 为触摸设备添加一个.active类通过 JS 在touchstart和touchend事件中动态添加/移除。2. 确保:active样式有足够明显的视觉变化如transform: scale(0.98)。6. 最佳实践与工程化建议将LiquidGlassSkill从一个演示项目变成可投入生产的技能或组件库需要考虑以下几点6.1 样式封装与构建使用 CSS 预处理器考虑使用 Sass 或 Less 来管理变量、混合宏和嵌套规则这能让代码更易维护。例如将.glass混合宏定义为mixin glass-effect { ... }。采用 CSS-in-JS 或 CSS Modules如果你在 React、Vue 等框架中使用可以考虑使用 Styled-components、Emotion 或 Vue 的style scoped将样式与组件逻辑紧密绑定避免全局污染。构建与打包使用 PostCSS配合 Autoprefixer 自动添加浏览器前缀和打包工具如 Webpack, Vite, Parcel来处理你的样式文件最终输出压缩后的dist/liquid-glass-skill.css供其他项目引用。6.2 可访问性 (A11y) 考虑炫酷的 UI 不能以牺牲可访问性为代价。颜色对比度确保玻璃背景上的文字与背景有足够的对比度WCAG AA 标准建议至少 4.5:1。可以使用在线工具检查。在深色主题下尤其要注意。焦点指示器为可交互元素按钮、输入框提供清晰可见的:focus样式不要用outline: none完全移除它可以将其设计得与你的玻璃风格协调。减少运动对于前庭障碍用户可以考虑使用media (prefers-reduced-motion: reduce)媒体查询来减少或移除过渡动画。6.3 性能优化分层与合成浏览器将应用了backdrop-filter的元素提升到独立的合成层。避免过度使用以免创建过多图层消耗内存。备用方案 (Fallback)为不支持backdrop-filter的浏览器如旧版 Firefox提供优雅降级。可以使用supports规则。.glass { background: var(--lg-color-surface-solid); /* 备用纯色背景 */ } supports (backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px)) { .glass { background: var(--lg-color-surface); /* 支持时使用半透明背景 */ backdrop-filter: blur(var(--lg-blur-intensity)) saturate(180%); -webkit-backdrop-filter: blur(var(--lg-blur-intensity)) saturate(180%); } }6.4 与设计系统集成定义 Design Tokens就像我们在base.css里做的那样将所有颜色、间距、圆角、阴影等定义为 CSS 变量。这为整个项目的视觉一致性打下基础。创建组件变体除了基础的.glass-card可以创建.glass-card--compact紧凑、.glass-card--elevated更高阴影等变体类。文档化为你的LiquidGlassSkill创建详细的文档说明如何安装、使用、定制变量以及不同组件的 API。通过以上步骤你已经成功创建了一个具备 Apple Liquid Glass 视觉风格的、可复用的前端技能库。从核心的 CSS 实现到完整的组件示例再到性能、可访问性和工程化的考量这套方案为你提供了在现代 Web 项目中应用这种高级 UI 效果的完整路径。你可以直接使用这些代码也可以根据你的设计系统进行定制和扩展。
