liquid-resource.html
Rama master · réplica de lectura del repositorio original.
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Apple Liquid Glass 全生态视觉重构与全栈实现</title>
<style>
/*
==========================================================================
1. 核心架构与设计系统级 Token (Design Tokens)
定义了跨越不同变体的共享光学物理参数与环境光反馈
==========================================================================
*/
:root {
/* 玻璃体本色，保证在无背景时的最低限度遮蔽 */
--lg-base-tint: rgba(255, 255, 255, 0.08);
/* 边缘环境光高亮，模拟几何倒角的反光切割 */
--lg-rim-light: rgba(255, 255, 255, 0.45);
/* 多层次内阴影，构建玻璃内部的厚度感与体积感 */
--lg-internal-volume: inset 0 3px 15px rgba(255, 255, 255, 0.4),
inset 0 -3px 12px rgba(255, 255, 255, 0.1),
inset 1px 0 2px rgba(255, 255, 255, 0.5);
/* 环境投射阴影，脱离底层平面 */
--lg-drop-shadow: 0 24px 50px rgba(0, 0, 0, 0.2);
/* 复合滤镜：在 SVG 光学管道之上，增加原生亮度与饱和度补偿，防止画面因折射而显灰 */
--liquid-glass-optical-pipeline: url(#liquid-glass-engine) brightness(115%) saturate(120%);
}
/*
==========================================================================
2. 全局环境构建：用于凸显折射效能的动态底层背景
==========================================================================
*/
@keyframes fluidEnvironment {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
body {
margin: 0;
padding: 50px 20px;
min-height: 100vh;
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
/* 构建一个极具色彩张力的动态背景，能够最大限度触发 SVG 色散与光线偏折 */
background: linear-gradient(-45deg, #FF2A54, #833AB4, #12C2E9, #C471ED);
background-size: 300% 300%;
animation: fluidEnvironment 20s cubic-bezier(0.4, 0, 0.2, 1) infinite;
display: flex;
flex-direction: column;
align-items: center;
gap: 60px;
box-sizing: border-box;
color: white;
}
.section-title {
font-size: 14px;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: 600;
color: rgba(255, 255, 255, 0.7);
margin-bottom: -40px;
text-shadow: 0 2px 4px rgba(0,0,0,0.5);
z-index: 10;
}
/*
==========================================================================
3. Liquid Glass 物理承载容器抽象类
实施内容层与光学层深度隔离，确保前景 UI 组件的独立渲染
==========================================================================
*/
.liquid-glass-panel {
position: relative;
isolation: isolate; /* 建立新的堆叠上下文，防止混合模式穿透 */
box-shadow: var(--lg-drop-shadow);
/*
优雅降级机制 (Graceful Degradation):
优先宣告标准 backdrop-filter，针对 Safari 的 WebKit Bug (Bug #127102) 进行防护。
若浏览器支持 URL 滤镜，则后续的 pseudo-element 将覆盖此层光学表现。
*/
-webkit-backdrop-filter: blur(25px) saturate(200%);
backdrop-filter: blur(25px) saturate(200%);
border: 1px solid var(--lg-rim-light);
transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}
/* 光学透镜层伪元素：专职负责渲染由 SVG 定义的复杂光线追踪路径 */
.liquid-glass-panel::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: var(--lg-base-tint);
/* 引入内含色散与折射的核心管道 */
-webkit-backdrop-filter: var(--liquid-glass-optical-pipeline);
backdrop-filter: var(--liquid-glass-optical-pipeline);
box-shadow: var(--lg-internal-volume);
z-index: -1;
pointer-events: none; /* 穿透鼠标事件，保障底层控件交互 */
}
/*
==========================================================================
变体应用 A：Spotlight 级别高通透搜索框 (The Command Palette)
==========================================================================
*/
.variant-search {
display: flex;
align-items: center;
width: 480px;
max-width: 90vw;
padding: 18px 24px;
border-radius: 60px; /* 极致的圆角曲线 */
gap: 16px;
}
.variant-search input {
flex: 1;
background: transparent;
border: none;
outline: none;
font-size: 20px;
color: #FFFFFF;
font-weight: 500;
text-shadow: 0 2px 5px rgba(0,0,0,0.2); /* 提升输入文本在强透光环境下的对比度 */
}
.variant-search input::placeholder {
color: rgba(255, 255, 255, 0.7);
}
.search-kbd {
background: rgba(0, 0, 0, 0.25);
padding: 6px 12px;
border-radius: 8px;
font-size: 13px;
font-weight: 600;
border: 1px solid rgba(255, 255, 255, 0.15);
box-shadow: inset 0 1px 2px rgba(255,255,255,0.2);
}
/*
==========================================================================
变体应用 B：Apple Music 风格沉浸式底座控制台
==========================================================================
*/
.variant-media-player {
display: flex;
flex-direction: column;
width: 360px;
padding: 32px;
border-radius: 40px;
gap: 24px;
}
.player-meta {
text-align: center;
}
.player-meta h3 { margin: 0 0 6px 0; font-size: 24px; text-shadow: 0 2px 8px rgba(0,0,0,0.3); }
.player-meta p { margin: 0; font-size: 15px; opacity: 0.85; font-weight: 500; }
.progress-container {
width: 100%;
height: 8px;
background: rgba(0, 0, 0, 0.2);
border-radius: 4px;
box-shadow: inset 0 1px 3px rgba(0,0,0,0.3);
overflow: hidden;
}
.progress-bar {
width: 60%;
height: 100%;
background: #FFFFFF;
border-radius: 4px;
box-shadow: 0 0 10px rgba(255,255,255,0.8);
}
.player-controls {
display: flex;
justify-content: space-evenly;
align-items: center;
}
.btn-media {
background: none;
border: none;
color: #FFFFFF;
font-size: 28px;
cursor: pointer;
transition: transform 0.2s, opacity 0.2s;
text-shadow: 0 4px 10px rgba(0,0,0,0.4);
}
.btn-media:hover { transform: scale(1.1); opacity: 0.9; }
.btn-play { font-size: 50px; }
/*
==========================================================================
变体应用 C：macOS Tahoe 流体动态 Dock 导航栏
==========================================================================
*/
.variant-dock {
display: flex;
align-items: center;
padding: 16px 24px;
border-radius: 48px;
gap: 20px;
}
/* 针对鼠标响应触发极致的物理外扩形变 (Morphing) */
.variant-dock:hover {
padding: 20px 32px;
border-radius: 56px;
transform: translateY(-5px);
}
.dock-app {
width: 56px;
height: 56px;
background: linear-gradient(135deg, rgba(255,255,255,0.4), rgba(255,255,255,0.05));
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
font-size: 30px;
cursor: pointer;
/* 弹性交互反馈 */
transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
box-shadow: 0 10px 20px rgba(0,0,0,0.1), inset 0 2px 5px rgba(255,255,255,0.5);
border: 1px solid rgba(255,255,255,0.3);
}
.dock-app:hover {
transform: scale(1.3) translateY(-15px);
background: linear-gradient(135deg, rgba(255,255,255,0.6), rgba(255,255,255,0.1));
z-index: 10;
}
/*
==========================================================================
无障碍响应体系 (Accessibility Media Queries)
==========================================================================
*/
@media (prefers-reduced-transparency: reduce) {
.liquid-glass-panel::before {
/* 降级为近乎实体的色彩面板，切断深层 SVG 光线追踪，保障对比度 */
backdrop-filter: none;
-webkit-backdrop-filter: none;
background: rgba(30, 30, 30, 0.95);
}
}
@media (prefers-reduced-motion: reduce) {
.variant-dock,.dock-app {
transition: none; /* 移除引发生理不适的果冻回弹动效 */
}
.variant-dock:hover { transform: none; padding: 16px 24px; }
.dock-app:hover { transform: scale(1.1); }
}
</style>
</head>
<body>
<svg style="position: absolute; width: 0; height: 0; pointer-events: none;" aria-hidden="true">
<defs>
<filter id="liquid-glass-engine" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur in="SourceGraphic" stdDeviation="12" result="optics_blur_base" />
<feTurbulence type="fractalNoise" baseFrequency="0.02" numOctaves="3" result="vector_field_noise" />
<feGaussianBlur in="vector_field_noise" stdDeviation="3" result="smooth_vector_field" />
<feDisplacementMap in="optics_blur_base" in2="smooth_vector_field" scale="40" xChannelSelector="R" yChannelSelector="G" result="optics_refracted_body" />
<feOffset in="optics_refracted_body" dx="-3" dy="-1" result="optics_shift_red" />
<feColorMatrix in="optics_shift_red" type="matrix" result="isolated_red" values="
1 0 0 0 0
0 0 0 0 0
0 0 0 0 0
0 0 0 1 0" />
<feOffset in="optics_refracted_body" dx="3" dy="1" result="optics_shift_blue" />
<feColorMatrix in="optics_shift_blue" type="matrix" result="isolated_blue" values="
0 0 0 0 0
0 0 0 0 0
0 0 1 0 0
0 0 0 1 0" />
<feColorMatrix in="optics_refracted_body" type="matrix" result="isolated_green" values="
0 0 0 0 0
0 1 0 0 0
0 0 0 0 0
0 0 0 1 0" />
<feBlend mode="screen" in="isolated_red" in2="isolated_green" result="composite_rg" />
<feBlend mode="screen" in="composite_rg" in2="isolated_blue" result="final_render_output" />
</filter>
</defs>
</svg>
<div class="section-title">Variant 1: Spotlight Palette</div>
<div class="liquid-glass-panel variant-search">
<span style="font-size: 24px;">🔍</span>
<input type="text" placeholder="Search applications or files...">
<div class="search-kbd">⌘ K</div>
</div>
<div class="section-title">Variant 2: Immersive Console</div>
<div class="liquid-glass-panel variant-media-player">
<div class="player-meta">
<h3>Liquid Optics</h3>
<p>Apple Design Architecture · 2026</p>
</div>
<div class="progress-container">
<div class="progress-bar"></div>
</div>
<div class="player-controls">
<button type="button" class="btn-media">⏮</button>
<button type="button" class="btn-media btn-play">▶</button>
<button type="button" class="btn-media">⏭</button>
</div>
</div>
<div class="section-title">Variant 3: Fluid Dock</div>
<div class="liquid-glass-panel variant-dock">
<div class="dock-app">🧭</div>
<div class="dock-app">✉️</div>
<div class="dock-app">📸</div>
<div class="dock-app">⚙️</div>
</div>
</body>
</html>