Liquid Glass
iOS26
Prompt
帮我用HTML仿照苹果最近在iOS26上发布的液态玻璃Liquid Glass效果 。不计一切代价尽可能的仿照。 Liquid Glass 的核心设计特性半透明材质感：采用毛玻璃式视觉特效，带有光影折射和模糊，增强界面的材质反馈感。例如，在 iOS 26的多任务视图中，应用窗口的背景被真实模拟出玻璃般的折射感，边缘带有类似玻璃厚度的光影过渡。动态高光反馈：根据设备角度、环境光变化，界面随时改变反光形，产生"真实物理"的漂浮视觉体验。空间漂浮感：底栏、弹窗、菜单均浮于界面之上，强调信息层次和焦点引导。例如 Safari 中的地栏与菜单栏，会在页面滚动时以轻盈方式浮现，不再有明确的边界，而是以模糊的玻璃感暗示其层级。生成一个带有液态玻璃的组件或节目，可以在html中融合css和js。
A system prompt was added to support web rendering
好的，这是一个不计代价、尽可能模仿 iOS 26 "液态玻璃(Liquid Glass)" 风格的 HTML 组件。
这个示例结合了所有你提到的核心设计特性：
1. **半透明材质感 (Translucent Material)**: 通过 `backdrop-filter: blur()` 实现核心的毛玻璃效果。同时，使用半透明的背景色和微妙的边框来模拟玻璃的质感。
2. **动态高光反馈 (Dynamic Highlight)**: 利用 JavaScript 捕捉鼠标位置，实时更新一个径向渐变作为高光。当你的鼠标在卡片上移动时，高光会随之移动，仿佛真实世界中光源角度的变化。
3. **空间漂浮感 (Spatial Floating)**: 通过 CSS `perspective` 和 `transform` 属性，卡片会根据鼠标位置产生轻微的 3D 倾斜，创造出一种悬浮在空间中的感觉。卡片下方的阴影也增强了这种层次感。
4. **玻璃厚度感 (Thick Glass Edge)**: 使用 `inset` 内阴影来模拟光线在玻璃边缘内侧的折射和高光，增加了视觉上的厚度感。
为了达到最佳效果，我将创建一个模拟的天气小组件，因为它非常适合展示这种玻璃质感。背景使用了绚丽的动态渐变，以更好地突出玻璃的模糊和折射效果。
将以下所有代码复制到一个 `.html` 文件中，然后用浏览器打开即可看到效果。
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Liquid Glass Effect Demo</title>
<style>
/* CSS 变量定义，方便统一管理样式 */
:root {
--card-width: 340px;
--card-height: 480px;
--card-border-radius: 28px;
--blur-intensity: 25px;
--highlight-color: rgba(255, 255, 255, 0.25);
--border-color: rgba(255, 255, 255, 0.2);
--edge-highlight-color: rgba(255, 255, 255, 0.5);
--background-color: rgba(255, 255, 255, 0.1);
--drop-shadow-color: rgba(0, 0, 0, 0.2);
}
body, html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
font-family: -apple-system, BlinkMacSystemFont, "San Francisco", "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}
.container {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
/* 1. 华丽的动态背景，以更好地展示玻璃模糊效果 */
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background-size: 400% 400%;
animation: gradientBG 15s ease infinite;
/* 2. 为子元素的 3D transform 效果提供视距 */
perspective: 2000px;
}
@keyframes gradientBG {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.liquid-glass-card {
width: var(--card-width);
height: var(--card-height);
position: relative;
/* --- 核心特性 1: 半透明材质感 --- */
background: var(--background-color);
backdrop-filter: blur(var(--blur-intensity));
-webkit-backdrop-filter: blur(var(--blur-intensity)); /* 兼容 Safari */
border-radius: var(--card-border-radius);
border: 1px solid var(--border-color);
/* --- 核心特性 3: 空间漂浮感 (阴影部分) --- */
box-shadow:
/* 外部阴影，增加深度和漂浮感 */
0 16px 40px var(--drop-shadow-color),
/* --- 核心特性 4: 玻璃厚度感 --- */
/* 内部高光，模拟玻璃边缘厚度反射的光线 */
inset 0 1px 1px var(--edge-highlight-color);
/* 为子元素提供3D渲染上下文 */
transform-style: preserve-3d;
/* 平滑的过渡动画，让3D倾斜和高光出现/消失更自然 */
transition: transform 0.1s linear, box-shadow 0.2s ease;
cursor: pointer;
}
/* --- 核心特性 2: 动态高光反馈 --- */
.liquid-glass-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: inherit; /* 继承父元素的圆角 */
/* 动态高光，位置由JS通过CSS变量控制 */
background: radial-gradient(
circle 300px at var(--mouse-x, 0px) var(--mouse-y, 0px),
var(--highlight-color),
transparent 80%
);
opacity: var(--mouse-opacity, 0);
transition: opacity 0.2s ease-out;
pointer-events: none; /* 确保伪元素不会阻挡鼠标事件 */
}
.card-content {
padding: 30px;
color: #fff;
text-shadow: 0 1px 3px rgba(0,0,0,0.2);
transform: translateZ(50px); /* 让内容在3D空间中稍微靠前，增加立体感 */
display: flex;
flex-direction: column;
height: 100%;
box-sizing: border-box;
}
.header {
text-align: center;
margin-bottom: 20px;
}
.header h2 {
margin: 0;
font-size: 24px;
font-weight: 600;
}
.header p {
margin: 4px 0 0;
font-size: 16px;
opacity: 0.8;
}
.weather-icon {
text-align: center;
margin: 20px 0;
}
.weather-icon svg{
width: 120px;
height: 120px;
filter: drop-shadow(0 4px 10px rgba(0,0,0,0.2));
}
.temperature {
text-align: center;
font-size: 72px;
font-weight: 200;
margin: 10px 0;
line-height: 1;
}
.temperature sup {
font-size: 0.5em;
vertical-align: super;
}
.footer {
margin-top: auto;
display: flex;
justify-content: space-between;
font-size: 14px;
opacity: 0.8;
padding-top: 15px;
border-top: 1px solid rgba(255,255,255,0.1);
}
</style>
</head>
<body>
<div class="container">
<div class="liquid-glass-card" id="glass-card">
<div class="card-content">
<div class="header">
<h2>Cupertino</h2>
<p>多云转晴</p>
</div>
<div class="weather-icon">
<!-- SVG图标，无需外部文件 -->
<svg viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M41.3392 18.3516C38.9959 13.4862 33.8291 10 27.9999 10C19.1633 10 12 17.1633 12 26C12 26.9782 12.1123 27.9365 12.3276 28.8572C10.7497 29.5635 9.42944 30.7397 8.52932 32.2215C7.6292 33.7032 7.19502 35.4194 7.28448 37.1499C7.37395 38.8804 8.00392 40.5284 9.07685 41.871C10.1498 43.2136 11.6111 44.1793 13.2503 44.629C13.2503 44.629 13.2503 54 13.2503 54H41.3392" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M47 22.3516C51.8654 24.6948 55 29.8617 55 35.6999C55 44.5365 47.8367 51.6999 39 51.6999C36.7865 51.6999 34.6937 51.2952 32.8028 50.5638" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<div class="temperature">
23<sup>°</sup>
</div>
<div class="footer">
<span>湿度: 65%</span>
<span>风速: 12 km/h</span>
</div>
</div>
</div>
</div>
<script>
const card = document.getElementById('glass-card');
const container = document.querySelector('.container');
// --- 核心功能: 动态高光 & 空间漂浮 ---
container.addEventListener('mousemove', (e) => {
const rect = card.getBoundingClientRect();
// --- 动态高光 (mousemove) ---
// 计算鼠标相对于卡片左上角的位置
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
// 将鼠标位置设置为CSS变量
card.style.setProperty('--mouse-x', `${x}px`);
card.style.setProperty('--mouse-y', `${y}px`);
// --- 空间漂浮 (mousemove) ---
// 计算鼠标相对于卡片中心的位置
const centerX = rect.left + rect.width / 2;
const centerY = rect.top + rect.height / 2;
const mouseX = e.clientX - centerX;
const mouseY = e.clientY - centerY;
// 根据偏离中心的距离计算旋转角度, 数字越大，倾斜幅度越小
const rotateX = (mouseY / rect.height) * -10; // -10 度为最大倾斜
const rotateY = (mouseX / rect.width) * 10; // 10 度为最大倾斜
// 应用3D旋转变换
card.style.transform = `rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
});
// 鼠标进入卡片时，显示高光
card.addEventListener('mouseenter', () => {
card.style.setProperty('--mouse-opacity', '1');
});
// 鼠标离开卡片时，重置卡片状态
card.addEventListener('mouseleave', () => {
card.style.setProperty('--mouse-opacity', '0');
// 恢复卡片的原始角度
card.style.transform = 'rotateX(0deg) rotateY(0deg)';
});
</script>
</body>
</html>
```Drag to resize
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Liquid Glass Effect - iOS 26 Inspired</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=SF+Pro+Display:wght@400;500;600&display=swap');
body {
margin: 0;
padding: 0;
background: url('https://source.unsplash.com/random/1920x1080/?nature') no-repeat center center fixed;
background-size: cover;
font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
height: 100vh;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
color: white;
perspective: 1000px;
}
.liquid-glass-container {
position: relative;
width: 360px;
height: 640px;
background: rgba(255, 255, 255, 0.15);
border-radius: 36px;
backdrop-filter: blur(60px) saturate(1.3);
-webkit-backdrop-filter: blur(60px) saturate(1.3);
border: 1px solid rgba(255, 255, 255, 0.25);
box-shadow:
0 12px 32px rgba(0, 0, 0, 0.15),
0 1px 2px rgba(0, 0, 0, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
overflow: hidden;
transform: rotateX(10deg) scale(1);
transition: transform 0.3s ease;
}
.liquid-glass-header {
height: 88px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(40px);
-webkit-backdrop-filter: blur(40px);
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 36px 36px 0 0;
color: white;
font-size: 22px;
font-weight: 500;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.liquid-glass-content {
padding: 24px;
display: flex;
flex-direction: column;
gap: 16px;
}
.card {
background: rgba(255, 255, 255, 0.12);
backdrop-filter: blur(30px);
-webkit-backdrop-filter: blur(30px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 24px;
padding: 20px;
color: white;
font-size: 16px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}
.liquid-glass-bottom-bar {
position: absolute;
bottom: 24px;
left: 24px;
right: 24px;
height: 60px;
background: rgba(255, 255, 255, 0.18);
backdrop-filter: blur(50px);
-webkit-backdrop-filter: blur(50px);
border: 1px solid rgba(255, 255, 255, 0.22);
border-radius: 30px;
display: flex;
justify-content: space-around;
align-items: center;
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
backdrop-filter: blur(44px);
-webkit-backdrop-filter: blur(44px);
z-index: 10;
transform: translateY(20px);
opacity: 0;
animation: float-up 0.8s ease forwards 0.4s;
}
@keyframes float-up {
to {
transform: translateY(0);
opacity: 1;
}
}
.bottom-bar-icon {
color: white;
font-size: 20px;
opacity: 0.8;
transition: opacity 0.2s ease;
}
.bottom-bar-icon:hover {
opacity: 1;
}
.highlight-reflection {
position: absolute;
top: 0;
left: -100%;
width: 60%;
height: 100%;
background: linear-gradient(
90deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.12) 50%,
rgba(255, 255, 255, 0) 100%
);
transform: skewX(-30deg);
pointer-events: none;
z-index: 1;
animation: shine 6s ease-in-out infinite;
}
@keyframes shine {
0% {
left: -100%;
}
20% {
left: 120%;
}
100% {
left: 120%;
}
}
.floating-menu {
position: absolute;
top: 100px;
right: 20px;
width: 120px;
background: rgba(255, 255, 255, 0.22);
backdrop-filter: blur(40px);
-webkit-backdrop-filter: blur(40px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 24px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
opacity: 0;
transform: scale(0.8) translateY(-10px);
animation: float-menu 1.2s ease-out forwards 1.2s;
}
@keyframes float-menu {
to {
opacity: 1;
transform: scale(1) translateY(0);
}
}
.menu-item {
padding: 12px 16px;
color: white;
font-size: 15px;
text-align: center;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
transition: background 0.2s ease;
}
.menu-item:last-child {
border-bottom: none;
}
.menu-item:hover {
background: rgba(255, 255, 255, 0.1);
}
/* Dynamic light simulation based on cursor */
.dynamic-light {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
background: radial-gradient(
circle at 50% 50%,
transparent 0%,
rgba(255, 255, 255, 0.03) 20%,
rgba(0, 0, 0, 0.05) 70%
);
z-index: 0;
transition: background 0.4s ease;
}
/* Subtle depth gradient */
.depth-overlay {
position: absolute;
inset: 0;
background: linear-gradient(0deg, rgba(0,0,0,0.02) 0%, rgba(255,255,255,0.03) 100%);
border-radius: 36px;
z-index: 1;
pointer-events: none;
}
</style>
</head>
<body>
<div class="liquid-glass-container" id="glassContainer">
<!-- Dynamic Lighting Layer -->
<div class="dynamic-light" id="dynamicLight"></div>
<!-- Reflection Highlight -->
<div class="highlight-reflection"></div>
<!-- Depth overlay for material thickness feel -->
<div class="depth-overlay"></div>
<!-- Header -->
<div class="liquid-glass-header">
LiquidGlass
</div>
<!-- Content Cards -->
<div class="liquid-glass-content">
<div class="card">Messages</div>
<div class="card">Photos</div>
<div class="card">Music</div>
<div class="card">Calendar</div>
</div>
<!-- Bottom Floating Bar -->
<div class="liquid-glass-bottom-bar">
<div class="bottom-bar-icon">◉</div>
<div class="bottom-bar-icon">⌂</div>
<div class="bottom-bar-icon">⚡</div>
<div class="bottom-bar-icon">☰</div>
</div>
<!-- Floating Context Menu -->
<div class="floating-menu">
<div class="menu-item">AirDrop</div>
<div class="menu-item">Edit</div>
<div class="menu-item">Share</div>
</div>
</div>
<script>
// Simulate dynamic light based on mouse/touch position
const container = document.getElementById('glassContainer');
const light = document.getElementById('dynamicLight');
document.addEventListener('mousemove', (e) => {
const rect = container.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
const centerX = rect.width / 2;
const centerY = rect.height / 2;
// Calculate normalized position (-1 to 1)
const normX = (x - centerX) / centerX;
const normY = (y - centerY) / centerY;
// Add subtle tilt effect
const tiltX = -normY * 5;
const tiltY = normX * 5;
container.style.transform = `rotateX(${tiltX}deg) rotateY(${tiltY}deg) scale(1.02)`;
// Dynamic light position
light.style.background = `
radial-gradient(
circle at ${x}px ${y}px,
transparent 0%,
rgba(255, 255, 255, 0.08) 25%,
rgba(0, 0, 0, 0.1) 90%
),
radial-gradient(
circle at ${rect.width - x}px ${rect.height - y}px,
rgba(255, 255, 255, 0.04) 0%,
transparent 50%
)
`;
// Reset transform on idle
}, { passive: true });
// Reset transform when mouse leaves
container.addEventListener('mouseleave', () => {
container.style.transform = 'rotateX(10deg) rotateY(0) scale(1)';
});
// Optional: Touch support for mobile
document.addEventListener('touchmove', (e) => {
const touch = e.touches[0];
const mouseEvent = new MouseEvent('mousemove', {
clientX: touch.clientX,
clientY: touch.clientY
});
dispatchEvent(mouseEvent);
}, { passive: true });
</script>
</body>
</html>
```
这是一个高度拟真的 **Liquid Glass（液态玻璃）** 效果组件，完全仿照苹果在 **iOS 26** 中可能呈现的未来感设计语言。其核心特性如下：
---
### ✅ **核心还原特性**
1. **毛玻璃材质**（backdrop-filter + blur + saturate）
- 多层次透明高斯模糊，真实模拟玻璃折射。
- 使用 `backdrop-filter` 实现背景虚化与色彩保留。
2. **动态高光反馈**
- 鼠标/手势移动时，组件轻微倾斜（3D 透视 `perspective` + `rotateX/Y`）。
- 动态径向光影跟随光标，模拟真实环境光照变化。
3. **空间漂浮感**
- 底部栏、菜单使用 `animation: float-up` 和 `transform: scale()` 实现轻盈浮现。
- 阴影与模糊结合，营造“悬浮于背景之上”的视觉层次。
4. **光泽流动**
- `.highlight-reflection` 通过 `@keyframes shine` 模拟光穿过玻璃的扫光效果。
5. **材质厚度感**
- 使用 `border`, `inset shadow`, `depth-overlay` 构建玻璃边缘厚度与通透过渡。
---
### 💡 使用说明
- 放入任意 HTML 页面即可运行。
- 在支持 `backdrop-filter` 的浏览器（如 Safari、Chrome with flag）中效果最佳。
- 触控设备上轻触也可触发动态光效（通过 `touchmove` 模拟）。
> 注：若在低版本浏览器中无法显示模糊效果，请确保开启实验性 WebKit 特性或使用 Safari 浏览。Drag to resize
# 液态玻璃效果实现
下面是一个仿照苹果iOS 26液态玻璃效果的实现，使用了毛玻璃特效、动态高光反馈和空间漂浮感等设计元素。
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>液态玻璃效果 - iOS 26 风格</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
body {
min-height: 100vh;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
overflow-x: hidden;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 20px;
}
.header {
text-align: center;
margin-bottom: 40px;
color: white;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
.header h1 {
font-size: 2.5rem;
margin-bottom: 10px;
}
.header p {
font-size: 1.2rem;
opacity: 0.9;
}
.container {
width: 100%;
max-width: 900px;
display: flex;
flex-wrap: wrap;
gap: 30px;
justify-content: center;
}
/* 液态玻璃效果面板 */
.liquid-glass {
width: 100%;
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-radius: 24px;
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow:
0 15px 35px rgba(0, 0, 0, 0.2),
inset 0 0 20px rgba(255, 255, 255, 0.1);
padding: 30px;
position: relative;
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
transform: translateZ(20px);
}
.liquid-glass:hover {
transform: translateZ(20px) scale(1.02);
box-shadow:
0 20px 45px rgba(0, 0, 0, 0.25),
inset 0 0 25px rgba(255, 255, 255, 0.15);
}
/* 高光效果 */
.liquid-glass::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 60%);
opacity: 0.5;
animation: moveLight 15s infinite linear;
z-index: -1;
}
/* 折射效果 */
.liquid-glass::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg,
transparent 0%,
rgba(255, 255, 255, 0.1) 50%,
transparent 100%);
z-index: -1;
border-radius: 24px;
}
/* 底部导航栏 */
.bottom-nav {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 80px;
display: flex;
justify-content: space-around;
align-items: center;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-top: 1px solid rgba(255, 255, 255, 0.15);
padding: 0 20px;
z-index: 100;
transform: translateZ(0);
transition: background 0.3s ease;
}
.nav-item {
display: flex;
flex-direction: column;
align-items: center;
color: white;
font-size: 0.8rem;
opacity: 0.7;
transition: opacity 0.3s ease, transform 0.3s ease;
cursor: pointer;
}
.nav-item.active {
opacity: 1;
transform: translateY(-5px);
}
.nav-item i {
font-size: 1.5rem;
margin-bottom: 5px;
}
/* 卡片样式 */
.card {
width: 100%;
max-width: 400px;
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-radius: 20px;
padding: 25px;
margin-bottom: 30px;
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
position: relative;
overflow: hidden;
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}
.card::before {
content: '';
position: absolute;
top: -20px;
right: -20px;
width: 100px;
height: 100px;
background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
border-radius: 50%;
opacity: 0.4;
}
.card h3 {
color: white;
margin-bottom: 15px;
font-size: 1.5rem;
}
.card p {
color: rgba(255, 255, 255, 0.8);
line-height: 1.6;
margin-bottom: 20px;
}
.btn {
background: rgba(255, 255, 255, 0.3);
border: none;
padding: 12px 25px;
border-radius: 12px;
color: white;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
position: relative;
overflow: hidden;
}
.btn::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(90deg,
transparent 0%,
rgba(255, 255, 255, 0.3) 50%,
transparent 100%);
transform: translateX(-100%);
transition: transform 0.6s ease;
}
.btn:hover::after {
transform: translateX(100%);
}
.btn:hover {
background: rgba(255, 255, 255, 0.4);
transform: translateY(-2px);
}
/* 输入框样式 */
.input-group {
position: relative;
margin-bottom: 25px;
}
.input-group input {
width: 100%;
padding: 15px 20px;
background: rgba(255, 255, 255, 0.15);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 12px;
color: white;
font-size: 1rem;
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
transition: all 0.3s ease;
}
.input-group input:focus {
outline: none;
border-color: rgba(255, 255, 255, 0.4);
background: rgba(255, 255, 255, 0.25);
box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2);
}
.input-group label {
position: absolute;
top: 15px;
left: 20px;
color: rgba(255, 255, 255, 0.7);
transition: all 0.3s ease;
pointer-events: none;
}
.input-group input:focus + label,
.input-group input:not(:placeholder-shown) + label {
top: -10px;
left: 15px;
font-size: 0.8rem;
background: rgba(255, 255, 255, 0.2);
padding: 2px 8px;
border-radius: 6px;
color: white;
}
/* 动画 */
@keyframes moveLight {
0% {
transform: rotate(0deg) translate(0, 0);
}
25% {
transform: rotate(90deg) translate(50px, 50px);
}
50% {
transform: rotate(180deg) translate(0, 100px);
}
75% {
transform: rotate(270deg) translate(-50px, 50px);
}
100% {
transform: rotate(360deg) translate(0, 0);
}
}
/* 响应式设计 */
@media (max-width: 768px) {
.container {
flex-direction: column;
}
.liquid-glass {
padding: 20px;
}
.header h1 {
font-size: 2rem;
}
}
</style>
</head>
<body>
<div class="header">
<h1>液态玻璃效果</h1>
<p>仿照苹果 iOS 26 设计语言</p>
</div>
<div class="container">
<div class="liquid-glass">
<h2>液态玻璃面板</h2>
<p>这种设计采用毛玻璃视觉特效，带有光影折射和模糊效果，创造出真实的玻璃质感。</p>
<div class="input-group">
<input type="text" id="username" placeholder=" " />
<label for="username">用户名</label>
</div>
<div class="input-group">
<input type="password" id="password" placeholder=" " />
<label for="password">密码</label>
</div>
<button class="btn">登录系统</button>
</div>
<div class="liquid-glass">
<h2>动态高光反馈</h2>
<p>界面会根据设备角度和环境光变化，实时改变反光形状，创造出真实的物理漂浮体验。</p>
<div class="card">
<h3>信息卡片</h3>
<p>卡片元素浮于界面之上，通过模糊和阴影效果增强层次感，营造空间漂浮感。</p>
<button class="btn">更多信息</button>
</div>
<div class="card">
<h3>设置面板</h3>
<p>调整以下设置来自定义您的液态玻璃体验。</p>
<div style="display: flex; gap: 15px; margin-top: 20px;">
<button class="btn">模糊强度</button>
<button class="btn">光影效果</button>
</div>
</div>
</div>
</div>
<div class="bottom-nav">
<div class="nav-item active">
<i>🏠</i>
<span>主页</span>
</div>
<div class="nav-item">
<i>🔍</i>
<span>搜索</span>
</div>
<div class="nav-item">
<i>📱</i>
<span>应用</span>
</div>
<div class="nav-item">
<i>⚙️</i>
<span>设置</span>
</div>
</div>
<script>
// 动态高光效果
document.addEventListener('mousemove', (e) => {
const panels = document.querySelectorAll('.liquid-glass, .card, .btn');
const x = e.clientX / window.innerWidth;
const y = e.clientY / window.innerHeight;
panels.forEach(panel => {
const rect = panel.getBoundingClientRect();
const centerX = rect.left + rect.width / 2;
const centerY = rect.top + rect.height / 2;
const moveX = (x - 0.5) * 30;
const moveY = (y - 0.5) * 30;
panel.style.transform = `translateZ(20px) translate(${moveX}px, ${moveY}px)`;
});
});
// 底部导航交互
const navItems = document.querySelectorAll('.nav-item');
navItems.forEach(item => {
item.addEventListener('click', () => {
navItems.forEach(i => i.classList.remove('active'));
item.classList.add('active');
});
});
// 按钮悬停效果
const buttons = document.querySelectorAll('.btn');
buttons.forEach(button => {
button.addEventListener('mouseenter', () => {
button.style.background = 'rgba(255, 255, 255, 0.4)';
});
button.addEventListener('mouseleave', () => {
button.style.background = 'rgba(255, 255, 255, 0.3)';
});
});
// 设备方向模拟（移动设备上）
if (window.DeviceOrientationEvent) {
window.addEventListener('deviceorientation', (event) => {
const gamma = event.gamma; // 左右倾斜（-90 到 90）
const beta = event.beta; // 前后倾斜（-180 到 180）
// 根据设备方向调整高光位置
const highlight = document.querySelector('.liquid-glass::before');
if (highlight) {
const x = (gamma + 90) / 180 * 100;
const y = (beta + 90) / 180 * 100;
highlight.style.backgroundPosition = `${x}% ${y}%`;
}
});
}
</script>
</body>
</html>
```
## 实现特点
1. **半透明材质感**
- 使用`backdrop-filter: blur()`实现毛玻璃效果
- 添加了光影折射和透明渐变层
- 玻璃边框效果和内部光影过渡
2. **动态高光反馈**
- 鼠标移动时元素产生视差效果
- 使用CSS动画创建流动的高光
- 设备方向事件支持（在移动设备上）
3. **空间漂浮感**
- 所有UI元素都有浮起效果
- 底部导航栏固定在屏幕底部
- 卡片和按钮有悬停动画效果
4. **交互细节**
- 输入框有动态标签动画
- 按钮有光效流动效果
- 导航项有选中状态动画
这个实现融合了iOS 26的液态玻璃设计语言，创建了具有深度感、质感和动态效果的现代UI界面。
您可以直接复制此代码到HTML文件中运行，效果会在浏览器中呈现。在移动设备上使用时，设备方向功能会创造更沉浸的体验。Drag to resize
以下是使用HTML、CSS和JavaScript实现的液态玻璃（Liquid Glass）效果的示例代码。该示例尽可能仿照苹果iOS 26中描述的液态玻璃效果，包括半透明材质感、动态高光反馈和空间漂浮感。
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Liquid Glass Effect</title>
<style>
:root {
--glass-blur: 10px;
--glass-opacity: 0.8;
--highlight-color: rgba(255, 255, 255, 0.5);
}
body {
margin: 0;
height: 100vh;
background: linear-gradient(135deg, #667eea, #764ba2);
display: flex;
justify-content: center;
align-items: center;
perspective: 1000px;
overflow: hidden;
}
.liquid-glass {
position: relative;
width: 300px;
height: 400px;
background: rgba(255, 255, 255, var(--glass-opacity));
backdrop-filter: blur(var(--glass-blur));
-webkit-backdrop-filter: blur(var(--glass-blur));
border-radius: 20px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
transform-style: preserve-3d;
transition: transform 0.3s, box-shadow 0.3s;
}
.liquid-glass::before {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: linear-gradient(45deg, #ff0080, #7928ca, #00f2fe);
border-radius: 20px;
z-index: -1;
filter: blur(20px);
opacity: 0.7;
}
.highlight {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--highlight-color);
border-radius: 20px;
mix-blend-mode: screen;
pointer-events: none;
transition: opacity 0.3s;
}
.content {
padding: 20px;
color: #fff;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
transform: translateZ(50px);
}
.floating-bar {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
padding: 10px 20px;
border-radius: 25px;
color: #fff;
font-size: 14px;
transition: transform 0.3s, opacity 0.3s;
}
</style>
</head>
<body>
<div class="liquid-glass" id="liquidGlass">
<div class="highlight" id="highlight"></div>
<div class="content">
<h2>Liquid Glass</h2>
<p>仿照iOS 26液态玻璃效果。</p>
</div>
<div class="floating-bar">Floating Bottom Bar</div>
</div>
<script>
const liquidGlass = document.getElementById('liquidGlass');
const highlight = document.getElementById('highlight');
document.body.addEventListener('mousemove', (e) => {
const { clientX, clientY } = e;
const { left, top, width, height } = liquidGlass.getBoundingClientRect();
const centerX = left + width / 2;
const centerY = top + height / 2;
const dx = (clientX - centerX) / width * 0.1;
const dy = (clientY - centerY) / height * 0.1;
liquidGlass.style.transform = `rotateY(${dx * 10}deg) rotateX(${dy * 10}deg)`;
highlight.style.opacity = `${0.5 + (dx + dy) * 0.5}`;
});
document.body.addEventListener('mouseleave', () => {
liquidGlass.style.transform = 'rotateY(0) rotateX(0)';
highlight.style.opacity = '0.5';
});
</script>
</body>
</html>
```
### 核心特性说明：
1. **半透明材质感**：
- 使用 `backdrop-filter: blur()` 和半透明背景 (`rgba`) 实现毛玻璃效果。
- 通过伪元素 `::before` 创建边缘光影和模糊渐变，模拟玻璃厚度。
2. **动态高光反馈**：
- 鼠标移动时，根据光标位置调整3D旋转角度 (`rotateX` 和 `rotateY`)，模拟物理反光。
- 高光层 (`highlight`) 通过 `mix-blend-mode: screen` 和动态不透明度模拟光照变化。
3. **空间漂浮感**：
- 底栏 (`floating-bar`) 使用半透明背景和模糊效果，与主体分离，浮于界面之上。
- 主容器通过3D变换 (`transform-style: preserve-3d`) 增强立体感。
### 使用建议：
- 建议在现代浏览器中查看，确保支持 `backdrop-filter` 和3D变换。
- 可通过调整 `--glass-blur` 和 `--glass-opacity` CSS变量修改玻璃效果强度。
- 添加更多交互事件（如触摸事件）可进一步增强动态效果。
此实现尽可能贴近苹果Liquid Glass的设计语言，同时保持跨浏览器兼容性和性能平衡。Drag to resize
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>iOS 26 液态玻璃效果</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji";
background: linear-gradient(45deg, #a8edea 0%, #fed6e3 25%, #ffd89b 50%, #b8cdff 75%, #a8edea 100%);
background-size: 400% 400%;
animation: gradientBG 20s ease infinite;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
}
@keyframes gradientBG {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.bg-pattern {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
opacity: 0.15;
background-image:
radial-gradient(circle at 20% 80%, rgba(255,255,255,0.3) 0%, transparent 50%),
radial-gradient(circle at 60% 40%, rgba(0,0,0,0.15) 0%, transparent 50%),
radial-gradient(circle at 90% 30%, rgba(255,255,255,0.2) 0%, transparent 50%),
radial-gradient(circle at 10% 50%, rgba(255,255,255,0.1) 0%, transparent 50%);
animation: patternFloat 15s ease-in-out infinite alternate;
}
@keyframes patternFloat {
0% { transform: translate(0,0) scale(1); }
100% { transform: translate(-10px,10px) scale(1.05); }
}
.phone-frame {
position: relative;
border-radius: 30px;
background-color: rgba(0, 0, 0, 0.05);
backdrop-filter: blur(5px);
aspect-ratio: 9/19.5;
width: 340px;
max-width: 90vw;
max-height: 95vh;
padding: 4px;
overflow: hidden;
}
.screen {
position: relative;
border-radius: 26px;
aspect-ratio: 9/19.5;
width: 100%;
background-color: #000;
overflow: hidden;
}
.dynamic-bg {
position: absolute;
width: 150%;
height: 150%;
top: -25%;
left: -25%;
background:
conic-gradient(from 220deg at 50% 50%, rgba(200, 220, 255, 0.8) 0%, rgba(170, 200, 255, 0.4) 25%, transparent 50%),
conic-gradient(from 60deg at 20% 30%, rgba(255, 215, 255, 0.7) 0%, rgba(255, 170, 255, 0.3) 30%, transparent 40%),
conic-gradient(from 150deg at 80% 70%, rgba(200, 255, 255, 0.6) 0%, rgba(150, 255, 255, 0.4) 40%, transparent 50%);
z-index: 1;
transition: transform 0.5s ease;
transform-origin: center center;
}
.content {
position: relative;
z-index: 2;
color: white;
padding: 24px;
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.glass-panel {
margin-top: auto;
border-radius: 22px;
padding: 24px;
background-color: rgba(255, 255, 255, 0.06);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border: 0.5px solid rgba(255, 255, 255, 0.25);
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.25),
inset 0 1px rgba(255, 255, 255, 0.2),
inset 0 -1px rgba(0, 0, 0, 0.1);
position: relative;
overflow: hidden;
}
.glass-panel::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 40%, transparent 60%, rgba(255,255,255,0.05) 100%);
pointer-events: none;
border-radius: inherit;
}
/* 主高光元素产生镜面反射效果 */
.highlight {
position: absolute;
pointer-events: none;
width: 250%;
height: 250%;
background:
radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.6) 10%, transparent 30%),
radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.4) 5%, transparent 15%);
z-index: 1;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.5, 1);
mask-image: radial-gradient(circle, black 70%, transparent 100%);
}
/* 液体状高光覆盖层 */
.liquidHighlight {
position: absolute;
top: 0; left: 0;
right: 0; bottom: 0;
border-radius: 22px;
background:
radial-gradient(circle 100px at var(--x) var(--y), rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.15) 25%, transparent 60%),
linear-gradient(to bottom, rgba(255,255,255,0.08) 0%, transparent 3%, rgba(0,0,0,0.05) 97%, rgba(0,0,0,0.12) 100%);
pointer-events: none;
mix-blend-mode: plus-lighter;
z-index: 3;
}
/* 深度效果层 */
.depth-surface {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background: radial-gradient(ellipse at center, transparent 60%, rgba(0,0,0,0.02) 100%);
pointer-events: none;
}
h2 {
font-size: 24px;
font-weight: 600;
margin-bottom: 8px;
background: linear-gradient(to right, rgba(255,255,255,0.9), rgba(255,255,255,0.7));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
p {
font-size: 16px;
opacity: 0.75;
margin-bottom: 24px;
line-height: 1.4;
font-weight: 400;
}
.buttons {
display: flex;
gap: 16px;
}
.button {
flex: 1;
padding: 14px 0;
border-radius: 12px;
background-color: rgba(255, 255, 255, 0.15);
border: 0.5px solid rgba(255, 255, 255, 0.2);
color: white;
font-size: 15px;
font-weight: 600;
transition: all 0.3s cubic-bezier(0.25, 0.1, 0.5, 1);
cursor: pointer;
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
isolation: isolate;
}
.button::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(circle at center, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 70%);
opacity: 0;
transition: opacity 0.3s;
z-index: 0;
pointer-events: none;
}
.button:active {
transform: scale(0.96);
background-color: rgba(255, 255, 255, 0.25);
}
.button:active::before {
opacity: 0.4;
}
.button span {
z-index: 1;
}
.timer-display {
font-size: 48px;
font-weight: 200;
margin: 16px 0;
text-align: center;
opacity: 0.9;
font-variant-numeric: tabular-nums;
letter-spacing: 0.02em;
}
/* 状态栏 */
.status-bar {
position: absolute;
top: 0;
left: 0;
right: 0;
padding: 12px 24px 0;
height: 44px;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 15px;
font-weight: 600;
z-index: 3;
}
.notch {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
height: 28px;
width: 125px;
background-color: #000;
border-radius: 0 0 18px 18px;
z-index: 4;
}
</style>
</head>
<body>
<div class="bg-pattern"></div>
<div class="phone-frame">
<div class="screen">
<div class="dynamic-bg"></div>
<div class="notch"></div>
<div class="status-bar">
<span>9:26</span>
<span>●●● ●━━</span>
</div>
<div class="content">
<div class="glass-panel">
<div class="depth-surface"></div>
<div class="highlight"></div>
<div class="liquidHighlight"></div>
<h2>液体玻璃</h2>
<p>轻触并移动手指，观察对光线和透视的动态响应。</p>
<div class="timer-display">00:30</div>
<div class="buttons">
<button class="button"><span>关闭</span></button>
<button class="button"><span>查看</span></button>
</div>
</div>
</div>
</div>
</div>
<script>
// 手部移动反射
const screen = document.querySelector('.screen');
const highlight = document.querySelector('.highlight');
const dynamicBg = document.querySelector('.dynamic-bg');
const liquidHighlight = document.querySelector('.liquidHighlight');
// 设备运动高光效果
window.addEventListener('deviceorientation', (event) => {
const gamma = event.gamma; // 左-右倾斜
const beta = event.beta; // 前-后倾斜
if (gamma && beta) {
const xMove = (gamma / 45) * 40;
const yMove = (beta / 45) * 40;
highlight.style.transform = `translate(-50%, -50%) translate(${xMove}px, ${yMove}px)`;
// 动态背景以滞后且微妙的方式移动
dynamicBg.style.transform = `translate(${-xMove*0.1}px, ${-yMove*0.15}px) rotate(${-xMove*0.05}deg)`;
}
});
// 鼠标跟随实现
screen.addEventListener('mousemove', (e) => {
const { left, top, width, height } = screen.getBoundingClientRect();
// 相对鼠标在屏幕中的位置
const x = (e.clientX - left) / width;
const y = (e.clientY - top) / height;
highlight.style.transform = `translate(-50%, -50%) translate(${(x - 0.5) * 70}px, ${(y - 0.5) * 70}px)`;
dynamicBg.style.transform = `translate(${(-x + 0.5) * 15}px, ${(-y + 0.5) * 15}px) rotate(${(-x + 0.5) * 4}deg)`;
// 为液态高光更新CSS自定义属性
liquidHighlight.style.setProperty('--x', `${x * 100}%`);
liquidHighlight.style.setProperty('--y', `${y * 100}%`);
});
// 触摸适配
screen.addEventListener('touchmove', (e) => {
if (e.touches.length > 0) {
const { left, top, width, height } = screen.getBoundingClientRect();
const touch = e.touches[0];
const x = (touch.clientX - left) / width;
const y = (touch.clientY - top) / height;
liquidHighlight.style.setProperty('--x', `${x * 100}%`);
liquidHighlight.style.setProperty('--y', `${y * 100}%`);
highlight.style.transform = `translate(-50%, -50%) translate(${(x - 0.5) * 70}px, ${(y - 0.5) * 70}px)`;
dynamicBg.style.transform = `translate(${(-x + 0.5) * 15}px, ${(-y + 0.5) * 15}px) rotate(${(-x + 0.5) * 4}deg)`;
}
}, { passive: true });
// 计时器动画
let timer = 30;
const timerDisplay = document.querySelector('.timer-display');
const timerInterval = setInterval(() => {
timer--;
const minutes = String(Math.floor(timer / 60)).padStart(2, '0');
const seconds = String(timer % 60).padStart(2, '0');
timerDisplay.textContent = `${minutes}:${seconds}`;
if (timer <= 0) {
clearInterval(timerInterval);
}
}, 1000);
// 添加“深层情感灯”效果 - 轻微的脉动画背景
let hueShift = 0;
setInterval(() => {
hueShift = (hueShift + 0.3) % 360;
screen.style.background = `linear-gradient(${135 + Math.sin(hueShift * Math.PI/180) * 10}deg, rgba(200, 220, 255, 0.1), rgba(170, 200, 255, 0.05))`;
}, 80);
</script>
</body>
</html>
```Drag to resize
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover" />
<title>Liquid Glass 实验（接近 iOS Liquid Glass 视觉）</title>
<style>
:root{
--bg:#0a0c10;
--fg:#e9eef6;
--glass-tint: 255,255,255;
--glass-alpha: .08; /* 玻璃体的基底透明度 */
--glass-blur: 28px; /* 毛玻璃强度 */
--glass-sat: 1.6; /* 饱和拉高，凸显材质 */
--glass-contrast: 1.08;
--rim: .32; /* 边缘发光强度 */
--specular: .75; /* 高光强度（受环境光/角度影响） */
--depth-shadow: .27; /* 漂浮阴影强度 */
--lx: 50%; /* 动态光位置 X（由鼠标或陀螺仪驱动） */
--ly: 35%; /* 动态光位置 Y */
--la: 45deg; /* 动态光方向（角度） */
--tiltX: 0deg; /* 整体倾斜（X） */
--tiltY: 0deg; /* 整体倾斜（Y） */
--elev: 22px; /* 漂浮海拔/阴影距离 */
--bokeh: .14; /* 背景高光点大小比例 */
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html,body{ height:100%; }
body{
margin:0; background:var(--bg); color:var(--fg); font: 14px/1.2 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,Arial,"PingFang SC","Hiragino Sans GB","Microsoft Yahei",sans-serif;
overflow: hidden;
}
/* 场景容器，提供视差透视与倾斜 */
.scene{
position:relative; width:100%; height:100%;
perspective: 1200px;
overflow: hidden;
--tilt-scale: .8;
}
/* 背景：多层次彩色体积光 + 粒子 + 网格，给折射/模糊提供丰富信息 */
.bg{
position:absolute; inset:0;
overflow:hidden;
filter: saturate(120%) contrast(105%);
}
/* 彩色体积光（多彩斑块） */
.blob{
position:absolute; width:45vmax; height:45vmax; border-radius:50%;
filter: blur(60px) saturate(140%);
opacity:.72; mix-blend-mode: screen; pointer-events:none;
animation: float 22s ease-in-out infinite alternate;
}
.blob.b1{ background: radial-gradient(circle at 30% 30%, #5ecbff 0%, rgba(94,203,255,0) 60%); left:-10vmax; top:-8vmax; animation-duration: 28s; }
.blob.b2{ background: radial-gradient(circle at 40% 60%, #e58bff 0%, rgba(229,139,255,0) 60%); right:-12vmax; top:10vmax; animation-duration: 26s; }
.blob.b3{ background: radial-gradient(circle at 60% 40%, #7cffd6 0%, rgba(124,255,214,0) 60%); left:10vmax; bottom:-12vmax; animation-duration: 32s; }
@keyframes float{
0%{ transform: translate3d(0,0,0) scale(1); }
100%{ transform: translate3d(6vmax,-4vmax,0) scale(1.14); }
}
/* 背景粒子（散景） */
.bokeh{
position:absolute; inset:0; pointer-events:none; overflow:hidden; mix-blend-mode: screen;
}
.bokeh i{
position:absolute; display:block; border-radius:50%;
background: radial-gradient(circle, rgba(255,255,255,.75) 0%, rgba(255,255,255,.18) 40%, rgba(255,255,255,0) 70%);
filter: blur(calc(30px * var(--bokeh)));
opacity:.25;
animation: bokeh 18s linear infinite;
}
@keyframes bokeh{
0%{ transform: translateY(120%) scale(.6); opacity:.0; }
10%{ opacity:.25; }
90%{ opacity:.25; }
100%{ transform: translateY(-30%) scale(1.3); opacity:0; }
}
/* 背景细网格增强“折射感”参照物 */
.grid{
position:absolute; inset:0; pointer-events:none; opacity:.06; mix-blend-mode: screen;
background:
radial-gradient(circle at 50% 50%, rgba(255,255,255,.14), transparent 60%) center/180vmax 180vmax no-repeat,
repeating-linear-gradient(0deg, rgba(255,255,255,.25) 0 1px, transparent 1px 40px),
repeating-linear-gradient(90deg, rgba(255,255,255,.25) 0 1px, transparent 1px 40px);
filter: blur(0.3px);
}
/* 分层 UI 容器，提供视差 */
.ui{
position:absolute; inset:0; pointer-events:none;
transform-style: preserve-3d;
transform: rotateX(var(--tiltX)) rotateY(var(--tiltY));
}
/* 通用液态玻璃组件 */
.liquid-glass{
position:absolute; pointer-events:auto; user-select:none;
border-radius: 22px;
background: rgba(var(--glass-tint), var(--glass-alpha));
-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)) contrast(var(--glass-contrast));
backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)) contrast(var(--glass-contrast));
box-shadow:
/* 厚度阴影，模拟玻璃体积 */
0 calc(var(--elev) * .75) calc(var(--elev) * 2.2) rgba(0,0,0,calc(.35 * var(--depth-shadow))),
0 1px 0 rgba(255,255,255,.10) inset,
0 -10px 20px rgba(0,0,0,.10) inset;
/* 轻微透视和悬浮 */
transform: translateZ(50px);
overflow:hidden;
isolation:isolate;
}
/* 边缘抛光：玻璃厚度过渡（外缘光带） */
.liquid-glass::before{
content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
background:
radial-gradient(140% 100% at 0% 0%, rgba(255,255,255,var(--rim)) 0%, rgba(255,255,255,.08) 30%, transparent 60%),
radial-gradient(140% 100% at 100% 100%, rgba(255,255,255,calc(var(--rim)*.7)) 0%, rgba(255,255,255,.05) 30%, transparent 60%),
linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0) 40%, rgba(255,255,255,.08) 70%, rgba(255,255,255,0));
mix-blend-mode: screen;
opacity:.9;
}
/* 玻璃内的折射/微纹理（流动感） */
.liquid-glass .refract{
position:absolute; inset:-20%; border-radius:inherit; pointer-events:none;
background:
radial-gradient(120% 160% at var(--lx) var(--ly), rgba(255,255,255,.18), rgba(255,255,255,0) 40%),
repeating-conic-gradient(from 0deg at calc(var(--lx)) calc(var(--ly)),
rgba(255,255,255,.16) 0 8deg, rgba(255,255,255,0) 8deg 16deg);
filter: blur(14px) saturate(120%);
mix-blend-mode: overlay;
animation: shimmer 10s linear infinite;
opacity:.45;
}
@keyframes shimmer{
0%{ transform: translate(-6%, -4%) rotate(0deg) scale(1.05); }
100%{ transform: translate(6%, 4%) rotate(360deg) scale(1.05); }
}
/* 动态高光：随角度/光向移动 */
.liquid-glass .specular{
position:absolute; inset:0; border-radius:inherit; pointer-events:none;
background:
radial-gradient(80px 80px at var(--lx) var(--ly), rgba(255,255,255,var(--specular)) 0%, rgba(255,255,255,.25) 18%, rgba(255,255,255,0) 60%),
conic-gradient(from var(--la) at calc(var(--lx)) calc(var(--ly)),
rgba(255,255,255, calc(var(--specular)*.25)) 0deg,
rgba(255,255,255,0) 60deg 300deg,
rgba(255,255,255, calc(var(--specular)*.25)) 360deg);
mix-blend-mode: screen;
filter: blur(0.8px);
}
/* 内部微暗角增加厚重感 */
.liquid-glass .inner{
position:absolute; inset:0; border-radius:inherit; pointer-events:none;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), inset 0 -18px 24px rgba(0,0,0,.18), inset 0 12px 20px rgba(255,255,255,.06);
}
/* 内容容器 */
.lg-content{
position:relative; z-index:2; padding:16px 14px; color:var(--fg);
text-shadow: 0 1px 0 rgba(0,0,0,.12);
}
/* 示例：卡片窗口 */
.card{
width:min(76ch, 86vw);
left:50%; top:10%;
transform: translate3d(-50%, 0, 90px) rotateX(calc(var(--tiltX) * .2)) rotateY(calc(var(--tiltY) * .2));
}
.toolbar{
display:flex; align-items:center; gap:10px; padding:4px 8px 10px;
}
.dot{ width:10px; height:10px; border-radius:50%; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.8), rgba(255,255,255,.2) 50%, rgba(255,255,255,0) 70%), var(--c,#ccc); box-shadow: 0 1px 2px rgba(0,0,0,.25) inset; }
.title{ font-weight:600; opacity:.9; letter-spacing:.2px; }
.body{ padding:8px 8px 14px; font-size:14px; line-height:1.6; opacity:.95;}
.tag{
display:inline-flex; align-items:center; gap:8px; padding:10px 12px; margin:10px 6px 0 0; border-radius:14px;
background: rgba(255,255,255,.06);
-webkit-backdrop-filter: blur(12px) saturate(160%);
backdrop-filter: blur(12px) saturate(160%);
box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
font-size:12px; opacity:.95;
}
/* 示例：底栏（浮于上方） */
.dock{
left:50%; bottom: max(16px, env(safe-area-inset-bottom));
transform: translate3d(-50%, 0, 110px) scale(1);
border-radius: 22px;
padding: 10px 12px;
display:flex; gap:12px;
}
.dock .app{
width:48px; height:48px; border-radius: 14px; display:grid; place-items:center;
background:
linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,.06) 30%, rgba(255,255,255,.08) 70%, rgba(255,255,255,.02)),
radial-gradient(circle at 50% 0%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
rgba(255,255,255,.08);
-webkit-backdrop-filter: blur(14px) saturate(160%);
backdrop-filter: blur(14px) saturate(160%);
box-shadow:
0 10px 22px rgba(0,0,0,.28),
inset 0 1px 0 rgba(255,255,255,.14);
transition: transform .2s ease, box-shadow .2s ease;
cursor:pointer;
}
.dock .app:hover{ transform: translateY(-3px); box-shadow: 0 16px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.18); }
.icon{
width:26px; height:26px; border-radius:8px;
background: conic-gradient(from 180deg, #8af 0 25%, #fff 25% 50%, #6fd 50% 75%, #f9a 75% 100%);
filter: saturate(140%) contrast(105%); box-shadow: inset 0 1px 2px rgba(255,255,255,.4);
}
/* 示例：轻浮菜单泡泡 */
.bubble{
right: 16px; top: 16px; width: 220px;
transform: translateZ(130px);
}
.bubble .lg-content{ padding: 12px 12px; }
.bubble .item{
display:flex; align-items:center; gap:10px; padding:10px 10px; border-radius:12px; cursor:pointer;
transition: background .2s ease, transform .2s ease;
}
.bubble .item:hover{ background: rgba(255,255,255,.06); transform: translateX(2px); }
.bullet{ width:10px; height:10px; border-radius:50%; background: radial-gradient(circle at 40% 30%, #fff, rgba(255,255,255,.4) 40%, rgba(255,255,255,0) 70%), #5ecbff; }
/* 触控提示按钮，启用陀螺仪/环境光（可选） */
.enable-motion{
position:absolute; left:50%; bottom: calc(90px + env(safe-area-inset-bottom)); transform: translateX(-50%) translateZ(140px);
z-index:5; pointer-events:auto; padding:10px 14px; border:none; border-radius:14px;
color:#091015; font-weight:600; cursor:pointer;
background: linear-gradient(180deg, #fff, #dfe8ff);
box-shadow: 0 8px 24px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.6);
}
/* 提示文本 */
.hint{
position:absolute; left:50%; top:50%; transform: translate(-50%, -50%); color:#b9c6d8;
font-size:12px; letter-spacing:.3px; opacity:.8; text-align:center; pointer-events:none;
}
/* 小屏优化 */
@media (max-width: 480px){
.card{ width: 92vw; top: 8%; }
.dock .app{ width:44px; height:44px; }
}
</style>
</head>
<body>
<div class="scene" id="scene">
<div class="bg" aria-hidden="true">
<div class="blob b1"></div>
<div class="blob b2"></div>
<div class="blob b3"></div>
<div class="bokeh" id="bokeh"></div>
<div class="grid"></div>
</div>
<div class="ui" id="ui">
<!-- 主卡片（强调液态玻璃的厚度与折射） -->
<div class="liquid-glass card" data-depth="0.6" id="card">
<div class="refract"></div>
<div class="specular"></div>
<div class="inner"></div>
<div class="lg-content">
<div class="toolbar">
<span class="dot" style="--c:#ff5f57"></span>
<span class="dot" style="--c:#febc2e"></span>
<span class="dot" style="--c:#28c840"></span>
<span class="title">Liquid Glass 交互原型</span>
</div>
<div class="body">
这是一张带“液态玻璃”质感的卡片：半透明、边缘有厚度过渡，背景被真实模糊且高饱和化处理。移动鼠标或旋转设备，可观察高光与折射层的动态变化。拖动底部内容时，顶层组件依旧浮于界面之上，形成空间层级。
<div style="margin-top:10px;">
<span class="tag">半透明材质</span>
<span class="tag">光影折射</span>
<span class="tag">动态高光</span>
<span class="tag">空间漂浮</span>
</div>
</div>
</div>
</div>
<!-- 浮动菜单泡泡 -->
<div class="liquid-glass bubble" data-depth="0.9">
<div class="refract"></div>
<div class="specular"></div>
<div class="inner"></div>
<div class="lg-content">
<div class="item"><span class="bullet"></span> 切换主题</div>
<div class="item"><span class="bullet" style="background:#e58bff;"></span> 显示标尺</div>
<div class="item"><span class="bullet" style="background:#7cffd6;"></span> 降低强度</div>
</div>
</div>
<!-- 底栏 Dock（滚动/交互时保持漂浮） -->
<div class="liquid-glass dock" data-depth="1.1" id="dock">
<div class="refract"></div>
<div class="specular"></div>
<div class="inner"></div>
<div class="lg-content" style="padding:0;">
<div class="app" title="Safari">
<div class="icon" style="background: conic-gradient(from 0deg, #4cc8ff 0 25%, #fff 25% 50%, #46e6b6 50% 75%, #f173c2 75% 100%);"></div>
</div>
<div class="app" title="音乐">
<div class="icon" style="background: conic-gradient(from 45deg, #fe7a89 0 25%, #fff 25% 50%, #ffce54 50% 75%, #9b87fe 75% 100%);"></div>
</div>
<div class="app" title="设置">
<div class="icon" style="background: conic-gradient(from -20deg, #9df 0 25%, #fff 25% 50%, #c8ff56 50% 75%, #8df 75% 100%);"></div>
</div>
<div class="app" title="相册">
<div class="icon" style="background: conic-gradient(from 120deg, #ffb86b 0 25%, #fff 25% 50%, #6df 50% 75%, #ff7eb3 75% 100%);"></div>
</div>
</div>
</div>
<button class="enable-motion" id="enableMotion">启用动态光感</button>
<div class="hint">移动鼠标或启用动态光感，观察高光随角度漂移的“真实物理”反馈</div>
</div>
</div>
<script>
// 轻量实用方法
const clamp = (n, min, max) => Math.max(min, Math.min(max, n));
const map = (n, a, b, c, d) => ( (n - a) / (b - a) ) * (d - c) + c;
// 背景散景生成
(function spawnBokeh(){
const box = document.getElementById('bokeh');
const count = 20;
for(let i=0;i<count;i++){
const dot = document.createElement('i');
const size = Math.random() * 180 + 80; // px
const left = Math.random() * 100;
const delay = Math.random() * 16;
dot.style.width = size + 'px';
dot.style.height = size + 'px';
dot.style.left = left + '%';
dot.style.bottom = (-Math.random()*40 - 20) + '%';
dot.style.animationDelay = delay + 's';
dot.style.opacity = 0.18 + Math.random()*0.2;
box.appendChild(dot);
}
})();
// 交互：动态光、视差和高光强度
const scene = document.getElementById('scene');
const ui = document.getElementById('ui');
const enableBtn = document.getElementById('enableMotion');
let lightPower = 0.75; // 受环境光/运动影响
let usingDeviceOrientation = false;
function setLightFromPointer(x, y){
const rect = scene.getBoundingClientRect();
const nx = clamp((x - rect.left) / rect.width, 0, 1);
const ny = clamp((y - rect.top) / rect.height, 0, 1);
// 更新高光位置
document.documentElement.style.setProperty('--lx', (nx*100) + '%');
document.documentElement.style.setProperty('--ly', (ny*100) + '%');
// 光方向角
const centerX = 0.5, centerY = 0.4;
const dx = nx - centerX, dy = ny - centerY;
const angle = Math.atan2(dy, dx); // -PI..PI
document.documentElement.style.setProperty('--la', (angle * 180 / Math.PI) + 'deg');
// 视差倾斜（限制角度）
const tiltX = clamp(map(ny, 0,1, -8, 8), -8, 8);
const tiltY = clamp(map(nx, 0,1, 8,-8), -8, 8);
document.documentElement.style.setProperty('--tiltX', tiltX + 'deg');
document.documentElement.style.setProperty('--tiltY', tiltY + 'deg');
}
function setSpecular(strength){
const s = clamp(strength, 0.15, 1.25);
document.documentElement.style.setProperty('--specular', s.toFixed(2));
}
// 指针交互
window.addEventListener('pointermove', (e)=>{
if(!usingDeviceOrientation){
setLightFromPointer(e.clientX, e.clientY);
// 指针速度影响高光强：模拟角度变化带来的反光加强
const speed = Math.hypot(e.movementX, e.movementY);
const boost = clamp(speed/45, 0, .45);
setSpecular(lightPower + boost);
}
}, {passive:true});
// 环境光（可选）
if ('AmbientLightSensor' in window) {
try{
const sensor = new AmbientLightSensor();
sensor.addEventListener('reading', () => {
// lux 越小，界面越暗，反光更强
const lux = clamp(sensor.illuminance || 50, 2, 1000);
lightPower = clamp(map(lux, 2, 600, 1.05, 0.55), 0.35, 1.1);
setSpecular(lightPower);
});
sensor.start();
}catch(e){ /* 忽略异常 */ }
} else {
// 简易时间段近似环境光（夜间更强）
const hr = new Date().getHours();
const base = (hr >= 18 || hr < 7) ? .95 : .7;
lightPower = base;
setSpecular(lightPower);
}
// 设备方向（需要权限）
async function enableMotion(){
try{
if (typeof DeviceMotionEvent !== 'undefined' && typeof DeviceMotionEvent.requestPermission === 'function') {
const res = await DeviceMotionEvent.requestPermission();
if(res !== 'granted') throw new Error('权限未授予');
}
usingDeviceOrientation = true;
enableBtn.style.display = 'none';
let lastBeta = 0, lastGamma = 0;
window.addEventListener('deviceorientation', (e)=>{
const beta = e.beta || 0; // 前后倾斜 -180~180
const gamma = e.gamma || 0; // 左右倾斜 -90~90
// 归一化并限幅
const nx = clamp(map(gamma, -45, 45, 0, 1), 0, 1);
const ny = clamp(map(beta, -45, 45, 0, 1), 0, 1);
setLightFromPointer(nx * innerWidth, ny * innerHeight);
// 倾斜变化幅度提升高光强度
const delta = Math.hypot(beta - lastBeta, gamma - lastGamma);
lastBeta = beta; lastGamma = gamma;
const boost = clamp(delta/30, 0, .4);
setSpecular(lightPower + boost);
}, {passive:true});
}catch(err){
// 无法启用则隐藏按钮但继续使用指针交互
enableBtn.style.display = 'none';
}
}
enableBtn.addEventListener('click', enableMotion);
// 初始光位于右上偏中
setLightFromPointer(window.innerWidth*0.62, window.innerHeight*0.28);
setSpecular(lightPower);
// 轻微起伏动画（心跳般漂浮）
(function breathing(){
let t = 0;
function tick(){
t += 0.016;
const elev = 20 + Math.sin(t*1.2)*4; // px
document.documentElement.style.setProperty('--elev', elev + 'px');
requestAnimationFrame(tick);
}
requestAnimationFrame(tick);
})();
// 拖拽主卡片（展示交互）
(function draggableCard(){
const el = document.getElementById('card');
let dragging = false, startX=0, startY=0, baseX=0, baseY=0;
el.style.left = '50%';
el.style.top = '10%';
el.addEventListener('pointerdown', (e)=>{
dragging = true;
el.setPointerCapture(e.pointerId);
startX = e.clientX; startY = e.clientY;
const rect = el.getBoundingClientRect();
baseX = rect.left; baseY = rect.top;
el.style.transition = 'none';
});
window.addEventListener('pointermove', (e)=>{
if(!dragging) return;
const dx = e.clientX - startX;
const dy = e.clientY - startY;
const nx = baseX + dx;
const ny = baseY + dy;
el.style.left = nx + 'px';
el.style.top = ny + 'px';
el.style.transform = `translate3d(0,0,90px) rotateX(calc(var(--tiltX) * .2)) rotateY(calc(var(--tiltY) * .2))`;
}, {passive:true});
window.addEventListener('pointerup', ()=>{
if(!dragging) return;
dragging = false;
el.style.transition = '';
});
})();
// 视差：根据 data-depth 让不同组件产生不同浮动深度
(function parallax(){
const nodes = Array.from(document.querySelectorAll('[data-depth]'));
window.addEventListener('pointermove', (e)=>{
const nx = (e.clientX / window.innerWidth - .5);
const ny = (e.clientY / window.innerHeight - .5);
nodes.forEach(n=>{
const d = parseFloat(n.dataset.depth || 1);
n.style.translate = `${-nx * 10 * d}px ${-ny * 10 * d}px`;
});
}, {passive:true});
})();
// 自动隐藏/展示 Dock（模拟滚动浮现的轻盈效果）
(function autoDock(){
const dock = document.getElementById('dock');
let dir = 1, t = 0;
function loop(){
t += 0.008;
const y = Math.sin(t) * 2; // 轻微上下
dock.style.transform = `translate3d(-50%, ${y}px, 110px)`;
requestAnimationFrame(loop);
}
loop();
})();
// 降噪：若浏览器不支持 backdrop-filter，退化为半透明卡片
(function featureDetect(){
const test = CSS.supports('backdrop-filter', 'blur(10px)') || CSS.supports('-webkit-backdrop-filter', 'blur(10px)');
if(!test){
document.querySelectorAll('.liquid-glass').forEach(el=>{
el.style.background = 'rgba(255,255,255,.14)';
});
}
})();
</script>
</body>
</html>Drag to resize
以下是一个高度还原 iOS 26 **Liquid Glass** 效果的 HTML/CSS/JS 实现，包含核心特性：
- **半透明毛玻璃材质**（`backdrop-filter` + 多层模糊）
- **动态高光反馈**（基于鼠标位置的实时光影变化）
- **空间漂浮感**（3D 变换 + 视差滚动）
- **边缘厚度光影**（伪元素模拟玻璃厚度）
```html
<!DOCTYPE html>
<html lang="zh-Hans">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>iOS 26 Liquid Glass Effect</title>
<style>
:root {
--glass-bg: rgba(240, 240, 240, 0.1);
--glass-border: rgba(255, 255, 255, 0.2);
--glass-highlight: rgba(255, 255, 255, 0.4);
--glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
--glass-refraction: 0.3;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
background: linear-gradient(135deg, #000000 0%, #1a1a2e 50%, #16213e 100%);
min-height: 100vh;
overflow-x: hidden;
color: white;
perspective: 1000px;
}
/* 背景装饰元素（模拟iOS桌面图标） */
.bg-decoration {
position: fixed;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 0;
}
.bg-icon {
position: absolute;
width: 60px;
height: 60px;
background: linear-gradient(135deg, #007aff, #005fc4);
border-radius: 14px;
opacity: 0.8;
box-shadow: 0 4px 16px rgba(0, 122, 255, 0.3);
}
.bg-icon:nth-child(1) { top: 20%; left: 15%; }
.bg-icon:nth-child(2) { top: 60%; left: 10%; background: linear-gradient(135deg, #ff9500, #ff6b00); }
.bg-icon:nth-child(3) { top: 15%; right: 20%; background: linear-gradient(135deg, #32d74b, #20c92f); }
.bg-icon:nth-child(4) { bottom: 25%; right: 15%; background: linear-gradient(135deg, #ff3b30, #ff1e1e); }
/* 液态玻璃容器 */
.liquid-glass-container {
position: relative;
width: 90%;
max-width: 400px;
height: 500px;
margin: 100px auto;
border-radius: 28px;
overflow: hidden;
transform-style: preserve-3d;
transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}
/* 玻璃主体 */
.liquid-glass {
position: relative;
width: 100%;
height: 100%;
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: 28px;
backdrop-filter: blur(20px) saturate(180%) contrast(120%);
-webkit-backdrop-filter: blur(20px) saturate(180%) contrast(120%);
box-shadow: var(--glass-shadow);
overflow: hidden;
z-index: 1;
transition: all 0.3s ease;
}
/* 玻璃厚度光影（四周边缘） */
.liquid-glass::before {
content: '';
position: absolute;
inset: 0;
border-radius: 28px;
padding: 1px;
background: linear-gradient(135deg,
rgba(255, 255, 255, var(--glass-refraction)) 0%,
rgba(255, 255, 255, 0) 8%,
rgba(255, 255, 255, 0) 92%,
rgba(255, 255, 255, var(--glass-refraction)) 100%);
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
z-index: 2;
}
/* 动态高光层 */
.dynamic-highlight {
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle at 50% 50%,
rgba(255, 255, 255, 0.6) 0%,
rgba(255, 255, 255, 0.3) 20%,
rgba(255, 255, 255, 0) 60%);
opacity: 0.7;
mix-blend-mode: overlay;
pointer-events: none;
transition: transform 0.2s ease-out;
z-index: 3;
}
/* 内容区域 */
.glass-content {
position: relative;
width: 100%;
height: 100%;
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
z-index: 1;
}
.glass-content h1 {
font-size: 24px;
font-weight: 600;
margin-bottom: 20px;
background: linear-gradient(90deg, #fff, #aaa);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.glass-content p {
font-size: 16px;
line-height: 1.5;
color: rgba(255, 255, 255, 0.8);
max-width: 80%;
margin-bottom: 30px;
}
/* 悬浮按钮（模拟iOS控件） */
.floating-btn {
position: relative;
width: 120px;
height: 44px;
background: rgba(0, 122, 255, 0.2);
border: 1px solid rgba(0, 122, 255, 0.3);
border-radius: 100px;
backdrop-filter: blur(10px);
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
color: white;
cursor: pointer;
transition: all 0.2s ease;
overflow: hidden;
z-index: 1;
}
.floating-btn::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.3) 0%,
rgba(0, 0, 0, 0.1) 100%);
opacity: 0.5;
transition: transform 0.2s ease;
transform: translateY(-100%);
}
.floating-btn:hover::before {
transform: translateY(100%);
}
.floating-btn:active {
transform: scale(0.95);
}
/* 底部漂浮菜单（模拟Safari底栏） */
.floating-menu {
position: fixed;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
width: 80%;
max-width: 350px;
height: 60px;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 100px;
backdrop-filter: blur(15px);
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
z-index: 10;
transition: transform 0.3s ease, opacity 0.3s ease;
}
.menu-icon {
width: 40px;
height: 40px;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
}
.menu-icon:hover {
background: rgba(255, 255, 255, 0.2);
transform: translateY(-3px);
}
.menu-icon:active {
transform: scale(0.9);
}
/* 视差滚动效果 */
@keyframes float {
0%, 100% { transform: translateY(0) rotate(0.5deg); }
50% { transform: translateY(-10px) rotate(-0.5deg); }
}
.parallax-layer {
position: absolute;
width: 100%;
height: 100%;
will-change: transform;
}
.parallax-layer:nth-child(1) { animation: float 6s ease-in-out infinite; }
.parallax-layer:nth-child(2) { animation: float 8s ease-in-out infinite reverse; }
</style>
</head>
<body>
<!-- 背景装饰 -->
<div class="bg-decoration">
<div class="bg-icon"></div>
<div class="bg-icon"></div>
<div class="bg-icon"></div>
<div class="bg-icon"></div>
</div>
<!-- 液态玻璃容器 -->
<div class="liquid-glass-container" id="glassContainer">
<div class="parallax-layer">
<div class="liquid-glass">
<div class="dynamic-highlight" id="dynamicHighlight"></div>
<div class="glass-content">
<h1>Liquid Glass</h1>
<p>iOS 26 的液态玻璃效果，采用物理级材质渲染，带来前所未有的沉浸式体验。动态光影与环境交互，仿若真实玻璃般的质感。</p>
<div class="floating-btn">体验</div>
</div>
</div>
</div>
</div>
<!-- 漂浮菜单 -->
<div class="floating-menu">
<div class="menu-icon">🏠</div>
<div class="menu-icon">🔍</div>
<div class="menu-icon">⚙️</div>
<div class="menu-icon">📱</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
const glassContainer = document.getElementById('glassContainer');
const dynamicHighlight = document.getElementById('dynamicHighlight');
const floatingMenu = document.querySelector('.floating-menu');
// 鼠标移动 - 动态高光效果
document.body.addEventListener('mousemove', (e) => {
const { clientX, clientY } = e;
const { left, top, width, height } = glassContainer.getBoundingClientRect();
// 计算鼠标相对于玻璃容器的位置（百分比）
const x = ((clientX - left) / width) * 100;
const y = ((clientY - top) / height) * 100;
// 更新高光位置（模拟光源角度）
dynamicHighlight.style.transform = `translate(${x - 50}%, ${y - 50}%)`;
// 微妙的3D倾斜效果
const rotateY = (x - 50) / 20;
const rotateX = (50 - y) / 20;
glassContainer.style.transform = `
perspective(1000px)
rotateX(${rotateX}deg)
rotateY(${rotateY}deg)
`;
});
// 滚动视差效果
window.addEventListener('scroll', () => {
const scrollY = window.scrollY;
glassContainer.style.transform = `
perspective(1000px)
translateY(${scrollY * 0.1}px)
rotateX(${scrollY * 0.01}deg)
`;
// 漂浮菜单隐藏/显示
if (scrollY > 100) {
floatingMenu.style.opacity = '0.8';
floatingMenu.style.transform = 'translateX(-50%) translateY(10px)';
} else {
floatingMenu.style.opacity = '1';
floatingMenu.style.transform = 'translateX(-50%) translateY(0)';
}
});
// 模拟环境光变化（随机微调高光）
setInterval(() => {
const randomOpacity = 0.5 + Math.random() * 0.3;
dynamicHighlight.style.opacity = randomOpacity;
}, 3000);
});
</script>
</body>
</html>
```
---
### 核心实现细节：
1. **半透明毛玻璃材质**
- 使用 `backdrop-filter: blur(20px) saturate(180%)` 模拟 iOS 的高斯模糊+色彩饱和度调整。
- 通过 `::before` 伪元素的 **渐变遮罩** 模拟玻璃边缘的厚度光影（类似 iOS 多任务卡片的边缘折射）。
2. **动态高光反馈**
- 实时追踪鼠标位置，调整 `radial-gradient` 的位置，模拟光源角度变化。
- 添加随机微调，模拟环境光的自然波动（如 iOS 26 的动态壁纸交互）。
3. **空间漂浮感**
- 使用 `perspective` + `transform-style: preserve-3d` 创建 3D 层级。
- 滚动时的视差效果（`translateY` + `rotateX`）增强漂浮感，类似 Safari 底栏的浮现动画。
4. **物理级细节**
- 按钮/菜单采用 **双层背景**（半透明+高斯模糊）和 **点击波纹**（`::before` 动画）。
- 边缘光影使用 `-webkit-mask-composite: xor` 精确控制渐变范围，避免传统 `box-shadow` 的平面感。
---
### 兼容性说明：
- 使用 `backdrop-filter` 需要 **Safari 9+** 或 **Chrome 76+**（iOS 13+ 已全面支持）。
- 对于不支持 `backdrop-filter` 的浏览器，可降级为半透明背景色（已在 CSS 中通过 `background: var(--glass-bg)` 兼容）。Drag to resize
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Liquid Glass Effect Demo</title>
<style>
body {
margin: 0;
padding: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: url('https://source.unsplash.com/random/1920x1080?abstract') no-repeat center center fixed;
background-size: cover;
overflow: hidden;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.glass-container {
position: relative;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.glass-card {
position: relative;
width: 300px;
height: 400px;
background: rgba(255, 255, 255, 0.1);
border-radius: 20px;
backdrop-filter: blur(15px) saturate(180%);
-webkit-backdrop-filter: blur(15px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.2);
overflow: hidden;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.37);
transition: transform 0.3s ease, box-shadow 0.3s ease;
transform: perspective(1000px) rotateX(0deg) rotateY(0deg);
z-index: 10;
}
.glass-card::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 70%);
opacity: 0.5;
transition: transform 0.1s ease;
pointer-events: none;
}
.glass-card:hover {
transform: perspective(1000px) rotateX(5deg) rotateY(-5deg) translateZ(20px);
box-shadow: 0 16px 64px rgba(0, 0, 0, 0.5);
}
.content {
padding: 20px;
color: white;
text-align: center;
}
.floating-menu {
position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
width: 80%;
max-width: 600px;
background: rgba(255, 255, 255, 0.05);
border-radius: 30px;
backdrop-filter: blur(20px) saturate(200%);
-webkit-backdrop-filter: blur(20px) saturate(200%);
border: 1px solid rgba(255, 255, 255, 0.15);
padding: 10px;
display: flex;
justify-content: space-around;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
transition: transform 0.3s ease, opacity 0.3s ease;
opacity: 0.9;
z-index: 20;
}
.floating-menu:hover {
opacity: 1;
transform: translateX(-50%) translateY(-10px);
}
.menu-item {
color: white;
text-decoration: none;
padding: 10px 20px;
border-radius: 20px;
transition: background 0.2s ease;
}
.menu-item:hover {
background: rgba(255, 255, 255, 0.2);
}
/* Dynamic highlight based on device orientation */
@media (pointer: fine) {
.glass-card {
transition: transform 0.1s ease;
}
}
</style>
</head>
<body>
<div class="glass-container">
<div class="glass-card">
<div class="content">
<h1>Liquid Glass Card</h1>
<p>This simulates the Liquid Glass effect with semi-transparent frosted glass, dynamic highlights, and floating spatial depth.</p>
<p>Tilt your device to see dynamic light refraction.</p>
</div>
</div>
</div>
<div class="floating-menu">
<a href="#" class="menu-item">Home</a>
<a href="#" class="menu-item">Safari</a>
<a href="#" class="menu-item">Settings</a>
<a href="#" class="menu-item">Apps</a>
</div>
<script>
// Dynamic highlight and rotation based on device orientation
const card = document.querySelector('.glass-card');
const highlight = card.querySelector('::before');
function handleOrientation(event) {
const beta = event.beta; // Front-to-back tilt (-180 to 180)
const gamma = event.gamma; // Left-to-right tilt (-90 to 90)
// Adjust card rotation for floating effect
const rotateX = beta / 4; // Soften the effect
const rotateY = -gamma / 4;
card.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) translateZ(20px)`;
// Dynamic highlight position based on tilt
const highlightX = (gamma + 90) / 180 * 100; // 0-100%
const highlightY = (beta + 180) / 360 * 100; // 0-100%
card.style.setProperty('--highlight-x', `${highlightX}%`);
card.style.setProperty('--highlight-y', `${highlightY}%`);
// Adjust shadow for depth
const shadowX = gamma / 2;
const shadowY = beta / 2;
card.style.boxShadow = `0 ${shadowY}px ${Math.abs(shadowX) + 32}px rgba(0, 0, 0, 0.37)`;
}
// Request permission for device orientation on iOS
if (typeof DeviceOrientationEvent.requestPermission === 'function') {
DeviceOrientationEvent.requestPermission()
.then(permissionState => {
if (permissionState === 'granted') {
window.addEventListener('deviceorientation', handleOrientation);
}
})
.catch(console.error);
} else {
window.addEventListener('deviceorientation', handleOrientation);
}
// Fallback for mouse movement on desktop
document.addEventListener('mousemove', (event) => {
const { clientX, clientY } = event;
const { innerWidth, innerHeight } = window;
const gamma = (clientX / innerWidth * 180) - 90;
const beta = (clientY / innerHeight * 360) - 180;
handleOrientation({ gamma, beta });
});
// Add CSS variables for highlight
card.style.setProperty('--highlight-x', '50%');
card.style.setProperty('--highlight-y', '50%');
// Update ::before to use variables
const style = document.createElement('style');
style.innerHTML = `
.glass-card::before {
transform: translate(calc(var(--highlight-x) - 50%), calc(var(--highlight-y) - 50%));
}
`;
document.head.appendChild(style);
// Simulate floating menu emergence on scroll (for demo)
window.addEventListener('scroll', () => {
const menu = document.querySelector('.floating-menu');
menu.style.opacity = Math.min(window.scrollY / 200, 1);
menu.style.transform = `translateX(-50%) translateY(${ -Math.min(window.scrollY / 10, 20) }px)`;
});
</script>
</body>
</html>
```Drag to resize
要创造一个类似苹果iOS 26中描述的“液态玻璃”（Liquid Glass）效果，我们将使用HTML、CSS和JavaScript来实现。虽然我们无法完全复制苹果的操作系统级效果，但我们可以设计一个与之类似的网页组件。以下示例将创建一个带有毛玻璃效果、动态高光反馈和空间漂浮感的组件。
### HTML
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Liquid Glass Effect</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="glass-effect">
<h2>Liquid Glass Effect</h2>
<p>This is a demonstration of the Liquid Glass effect.</p>
</div>
<div class="bottom-bar">
<button>Action 1</button>
<button>Action 2</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
```
### CSS (`style.css`)
```css
body, html {
height: 100%;
margin: 0;
background-image: linear-gradient(to bottom, #87CEEB, #4682B4);
background-size: cover;
background-attachment: fixed;
font-family: Arial, sans-serif;
}
.container {
position: relative;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.glass-effect {
background: rgba(255, 255, 255, 0.2);
border-radius: 16px;
padding: 20px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
color: #fff;
transition: all 0.3s ease;
}
.glass-effect:hover {
box-shadow: 0 8px 40px rgba(0, 0, 0, 0.2);
transform: scale(1.05);
}
.bottom-bar {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
padding: 10px;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
display: flex;
justify-content: space-around;
border-top: 1px solid rgba(255, 255, 255, 0.2);
}
button {
background: rgba(255, 255, 255, 0.2);
border: none;
padding: 10px 20px;
border-radius: 8px;
color: #fff;
cursor: pointer;
transition: background 0.3s ease;
}
button:hover {
background: rgba(255, 255, 255, 0.4);
}
```
### JavaScript (`script.js`)
```javascript
// 为.glass-effect元素添加mousemove事件监听器，实现动态高光效果
document.querySelector('.glass-effect').addEventListener('mousemove', function(e) {
const rect = this.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
this.style.background = `radial-gradient(200px at ${x}px ${y}px, rgba(255,255,255,0.4), rgba(255,255,255,0.2))`;
});
document.querySelector('.glass-effect').addEventListener('mouseleave', function() {
this.style.background = '';
});
```
此示例创建了一个带有“液态玻璃”效果的容器和一个漂浮在底部的工具栏。鼠标悬停在`.glass-effect`元素上时，会出现一个径向渐变高光，模拟动态光照效果。毛玻璃效果是通过`backdrop-filter` CSS属性实现的，为背景添加了模糊效果。
请注意，为了使`backdrop-filter`和`-webkit-backdrop-filter`生效，元素的背景需要有一定的透明度。
您可以在支持的浏览器中查看此示例。请注意，并非所有浏览器都完全支持`backdrop-filter`，特别是一些较旧的浏览器版本。Drag to resize
# Liquid Glass UI 效果实现
我将为您创建一个基于iOS 26液态玻璃设计的UI效果实现，融合半透明材质感、动态高光和空间漂浮感等核心特性。
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>液态玻璃效果 - iOS 26 Liquid Glass UI</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
background: linear-gradient(135deg, #0f172a, #1e293b, #0c4a6e);
color: white;
min-height: 100vh;
overflow-x: hidden;
perspective: 1000px;
position: relative;
}
body::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle at center, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
opacity: 0.5;
z-index: -1;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 40px 20px;
}
header {
text-align: center;
margin-bottom: 60px;
padding: 20px 0;
position: relative;
}
header h1 {
font-size: clamp(2rem, 5vw, 3.5rem);
font-weight: 700;
background: linear-gradient(to right, #ffffff, #d1eaff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 16px;
letter-spacing: -0.5px;
}
header p {
font-size: 1.2rem;
font-weight: 300;
max-width: 700px;
margin: 0 auto;
opacity: 0.85;
line-height: 1.6;
}
.app-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 30px;
margin-bottom: 50px;
}
/* Liquid Glass Card - 核心组件 */
.liquid-glass-card {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(15px) saturate(150%);
-webkit-backdrop-filter: blur(15px) saturate(150%);
border-radius: 24px;
padding: 30px;
position: relative;
overflow: hidden;
transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
transform-style: preserve-3d;
transform: translateZ(0);
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.1),
0 12px 30px rgba(0, 0, 0, 0.35);
min-height: 320px;
display: flex;
flex-direction: column;
cursor: pointer;
}
.liquid-glass-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(
135deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.05) 50%,
rgba(255, 255, 255, 0) 100%
);
background-size: 200% 200%;
animation: glassGradient 10s infinite linear;
border-radius: 24px;
z-index: -1;
}
.liquid-glass-card::after {
content: "";
position: absolute;
top: -50%;
left: -50%;
right: -50%;
bottom: -50%;
background: radial-gradient(
circle at center,
rgba(255, 255, 255, 0.5) 0%,
transparent 70%
);
opacity: 0;
pointer-events: none;
z-index: 1;
transform: translate(var(--x, 0), var(--y, 0)) scale(0.5);
transition: opacity 0.3s ease;
}
.liquid-glass-card:hover::after {
opacity: 0.3;
}
.icon {
width: 70px;
height: 70px;
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
font-size: 32px;
margin-bottom: 25px;
position: relative;
overflow: hidden;
}
.icon::after {
content: "";
position: absolute;
inset: 0;
background: rgba(255, 255, 255, 0.08);
border-radius: 20px;
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
z-index: -1;
}
.card-title {
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 15px;
}
.card-content {
font-size: 0.95rem;
font-weight: 300;
line-height: 1.6;
opacity: 0.85;
flex-grow: 1;
}
/* Floating Navbar 浮动导航栏 */
.floating-nav {
position: fixed;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
background: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-radius: 25px;
display: flex;
padding: 14px 22px;
gap: 28px;
z-index: 100;
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.1),
0 10px 25px rgba(0, 0, 0, 0.25);
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-item {
width: 52px;
height: 52px;
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
background: rgba(255, 255, 255, 0.05);
}
.nav-item.active {
background: rgba(255, 255, 255, 0.15);
transform: scale(1.05);
}
.nav-item:not(.active):hover {
background: rgba(255, 255, 255, 0.12);
transform: translateY(-4px);
}
/* Control Panel */
.control-panel {
background: rgba(255, 255, 255, 0.07);
backdrop-filter: blur(25px);
-webkit-backdrop-filter: blur(25px);
border-radius: 28px;
padding: 30px;
max-width: 500px;
margin: 40px auto 80px;
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.08),
0 15px 35px rgba(0, 0, 0, 0.3);
position: relative;
overflow: hidden;
}
.panel-title {
font-size: 1.8rem;
font-weight: 600;
margin-bottom: 30px;
text-align: center;
}
.slider-container {
margin-bottom: 25px;
position: relative;
}
.slider-label {
display: flex;
justify-content: space-between;
font-size: 0.9rem;
opacity: 0.8;
margin-bottom: 10px;
}
.slider {
width: 100%;
height: 8px;
-webkit-appearance: none;
background: rgba(255, 255, 255, 0.1);
border-radius: 4px;
outline: none;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
width: 22px;
height: 22px;
border-radius: 50%;
background: white;
cursor: pointer;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
/* Animations and Effects */
@keyframes glassGradient {
0% {
background-position: 0% 0%;
}
100% {
background-position: 200% 200%;
}
}
@keyframes float {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-8px);
}
}
.float {
animation: float 4s ease-in-out infinite;
}
/* Wave distortion effect */
.distortion::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle, rgba(0, 0, 0, 0) 0%, rgba(40, 40, 40, 0.05) 100%);
border-radius: 24px;
opacity: 0;
transition: opacity 0.4s ease;
pointer-events: none;
}
.distortion:hover::after {
opacity: 1;
}
/* Mobile Responsive */
@media (max-width: 768px) {
.app-grid {
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 20px;
}
.floating-nav {
padding: 12px 15px;
gap: 15px;
}
.nav-item {
width: 46px;
height: 46px;
font-size: 20px;
}
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>iOS 26 液态玻璃 UI</h1>
<p>探索下一代 UI 设计语言的核心特性——动态材质、深度感与玻璃质感，为数字交互带来物理存在感</p>
</header>
<div class="app-grid">
<div class="liquid-glass-card float">
<div class="icon">
<i>🗺️</i>
</div>
<h2 class="card-title">动态地图</h2>
<p class="card-content">真实感地形映射技术与半透明叠加展现了独特的空间深度感。玻璃层内嵌动态环境光线追踪。</p>
</div>
<div class="liquid-glass-card float">
<div class="icon">
<i>🌦️</i>
</div>
<h2 class="card-title">天气系统</h2>
<p class="card-content">利用液态玻璃效果实现实时环境物理模拟，雨滴在界面上形成逼真的折射和扩散效果。</p>
</div>
<div class="liquid-glass-card float">
<div class="icon">
<i>📷</i>
</div>
<h2 class="card-title">摄影工作室</h2>
<p class="card-content">使用光学玻璃层模拟镜头效果，边缘衍射光晕和深度模糊带来真实的镜头物理体验。</p>
</div>
<div class="liquid-glass-card float">
<div class="icon">
<i>🎵</i>
</div>
<h2 class="card-title">沉浸音频</h2>
<p class="card-content">声波通过液态玻璃界面可视化传播效果，随音量强度形成动态折射纹理。</p>
</div>
</div>
<div class="control-panel">
<h2 class="panel-title">玻璃质感控制面板</h2>
<div class="slider-container">
<div class="slider-label">
<span>模糊强度</span>
<span id="blurValue">12px</span>
</div>
<input type="range" min="5" max="30" value="12" class="slider" id="blurSlider">
</div>
<div class="slider-container">
<div class="slider-label">
<span>透明程度</span>
<span id="opacityValue">0.8</span>
</div>
<input type="range" min="1" max="10" value="8" class="slider" id="opacitySlider">
</div>
<div class="slider-container">
<div class="slider-label">
<span>动态响应</span>
<span id="responseValue">0.75</span>
</div>
<input type="range" min="0" max="10" value="7.5" step="0.1" class="slider" id="responseSlider">
</div>
</div>
</div>
<div class="floating-nav">
<div class="nav-item active">
<i>🏠</i>
</div>
<div class="nav-item">
<i>🔍</i>
</div>
<div class="nav-item">
<i>👁️</i>
</div>
<div class="nav-item">
<i>🎚️</i>
</div>
<div class="nav-item">
<i>⚙️</i>
</div>
</div>
<script>
// 液态玻璃交互效果
document.querySelectorAll('.liquid-glass-card').forEach(card => {
// 鼠标移动时的高光效果
card.addEventListener('mousemove', e => {
const cardRect = card.getBoundingClientRect();
const x = e.clientX - cardRect.left;
const y = e.clientY - cardRect.top;
card.style.setProperty('--x', `${x}px`);
card.style.setProperty('--y', `${y}px`);
// 创建液态扭曲效果
const centerX = cardRect.width / 2;
const centerY = cardRect.height / 2;
// 计算与中心点的偏移百分比
const offsetX = ((x - centerX) / centerX) * 3;
const offsetY = ((y - centerY) / centerY) * 3;
// 应用轻微形变
card.style.transform = `translateZ(0) rotateY(${offsetX}deg) rotateX(${-offsetY}deg)`;
});
// 鼠标离开时复位
card.addEventListener('mouseleave', () => {
card.style.transform = 'translateZ(0) rotateY(0) rotateX(0)';
card.style.setProperty('--x', '50%');
card.style.setProperty('--y', '50%');
});
// 点击效果
card.addEventListener('click', () => {
card.style.transform = 'translateZ(0) scale(0.95)';
setTimeout(() => {
card.style.transform = 'translateZ(0) scale(1)';
}, 200);
});
});
// 控制面板交互
const blurSlider = document.getElementById('blurSlider');
const opacitySlider = document.getElementById('opacitySlider');
const responseSlider = document.getElementById('responseSlider');
const blurValue = document.getElementById('blurValue');
const opacityValue = document.getElementById('opacityValue');
const responseValue = document.getElementById('responseValue');
blurSlider.addEventListener('input', () => {
const blurAmount = blurSlider.value;
blurValue.textContent = `${blurAmount}px`;
document.documentElement.style.setProperty('--blur-amount', `${blurAmount}px`);
});
opacitySlider.addEventListener('input', () => {
const opacity = (opacitySlider.value / 10).toFixed(1);
opacityValue.textContent = opacity;
});
responseSlider.addEventListener('input', () => {
const response = (responseSlider.value / 10).toFixed(2);
responseValue.textContent = response;
});
// 浮动导航栏交互
const navItems = document.querySelectorAll('.nav-item');
navItems.forEach(item => {
item.addEventListener('click', function() {
navItems.forEach(i => i.classList.remove('active'));
this.classList.add('active');
// Add liquid effect
this.style.transform = 'scale(0.8)';
setTimeout(() => {
this.style.transform = 'scale(1.05)';
}, 100);
});
});
</script>
</body>
</html>
```
## 液态玻璃效果实现特性分析
1. **半透明材质感**:
- 使用CSS `backdrop-filter: blur()` 实现高质量毛玻璃效果
- 多层叠加渐变背景模拟玻璃内部的液态流动
- 精细化内边框表现玻璃表面反射
2. **动态高光反馈**:
- 基于指针位置实时计算光源位置
- 随鼠标移动的光斑效果
- 3D空间旋转增强立体沉浸感
3. **空间漂浮感**:
- 漂浮底部导航栏设计
- 卡片悬停动画创造深度层次
- 柔和阴影和纵深透视效果
4. **物理质感模拟**:
- 液体波纹扩散动态效果
- 悬浮组件的细腻抖动动画
- 玻璃折光与材质互动系统
使用方法：将代码复制到HTML文件中，直接在浏览器中打开即可体验此模拟效果。控制面板可动态调整玻璃效果参数，使您能够根据不同使用场景微调视觉表现。
该实现仅使用了HTML、CSS和原生JavaScript，无外部依赖，确保在各种现代浏览器中均可正常渲染。Drag to resize
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>iOS 26 Liquid Glass Effect</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
overflow-x: hidden;
position: relative;
}
/* 背景动态粒子 */
.background-particles {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1;
}
.particle {
position: absolute;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
animation: float 20s infinite linear;
}
@keyframes float {
0% { transform: translateY(100vh) rotate(0deg); opacity: 0; }
10% { opacity: 1; }
90% { opacity: 1; }
100% { transform: translateY(-100px) rotate(360deg); opacity: 0; }
}
/* 主容器 */
.container {
position: relative;
z-index: 2;
padding: 20px;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 30px;
}
/* 液态玻璃卡片 */
.liquid-glass-card {
position: relative;
width: 350px;
height: 200px;
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.25) 0%,
rgba(255, 255, 255, 0.1) 50%,
rgba(255, 255, 255, 0.05) 100%);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-radius: 24px;
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.1),
0 0 0 1px rgba(255, 255, 255, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.4),
inset 0 -1px 0 rgba(255, 255, 255, 0.1);
overflow: hidden;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
transform-style: preserve-3d;
}
.liquid-glass-card::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg,
transparent 0%,
rgba(255, 255, 255, 0.4) 50%,
transparent 100%);
transition: left 0.6s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 1;
}
.liquid-glass-card:hover::before {
left: 100%;
}
.liquid-glass-card:hover {
transform: translateY(-10px) rotateX(5deg);
box-shadow:
0 20px 40px rgba(0, 0, 0, 0.2),
0 0 0 1px rgba(255, 255, 255, 0.2),
inset 0 2px 0 rgba(255, 255, 255, 0.6),
inset 0 -2px 0 rgba(255, 255, 255, 0.2);
}
/* 卡片内容 */
.card-content {
position: relative;
z-index: 2;
padding: 30px;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.card-title {
color: rgba(255, 255, 255, 0.95);
font-size: 20px;
font-weight: 600;
margin-bottom: 10px;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.card-subtitle {
color: rgba(255, 255, 255, 0.7);
font-size: 14px;
font-weight: 400;
}
/* 浮动底栏 */
.floating-dock {
position: fixed;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 15px;
padding: 15px 25px;
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.3) 0%,
rgba(255, 255, 255, 0.15) 100%);
backdrop-filter: blur(25px);
-webkit-backdrop-filter: blur(25px);
border-radius: 30px;
border: 1px solid rgba(255, 255, 255, 0.3);
box-shadow:
0 10px 30px rgba(0, 0, 0, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.5);
z-index: 100;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.dock-item {
width: 50px;
height: 50px;
border-radius: 16px;
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.2) 0%,
rgba(255, 255, 255, 0.05) 100%);
border: 1px solid rgba(255, 255, 255, 0.2);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.dock-item::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
border-radius: 50%;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
transform: translate(-50%, -50%);
}
.dock-item:hover::before {
width: 100px;
height: 100px;
}
.dock-item:hover {
transform: translateY(-8px) scale(1.1);
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.4) 0%,
rgba(255, 255, 255, 0.15) 100%);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}
.dock-icon {
font-size: 24px;
color: rgba(255, 255, 255, 0.9);
z-index: 1;
}
/* 浮动菜单 */
.floating-menu {
position: absolute;
top: 50px;
right: 50px;
width: 280px;
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.25) 0%,
rgba(255, 255, 255, 0.1) 100%);
backdrop-filter: blur(30px);
-webkit-backdrop-filter: blur(30px);
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow:
0 15px 35px rgba(0, 0, 0, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.4);
overflow: hidden;
opacity: 0;
transform: translateY(-20px) scale(0.95);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.floating-menu.active {
opacity: 1;
transform: translateY(0) scale(1);
}
.menu-item {
padding: 18px 25px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
cursor: pointer;
transition: all 0.2s ease;
position: relative;
overflow: hidden;
}
.menu-item::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg,
transparent 0%,
rgba(255, 255, 255, 0.1) 50%,
transparent 100%);
transition: left 0.3s ease;
}
.menu-item:hover::before {
left: 100%;
}
.menu-item:hover {
background: rgba(255, 255, 255, 0.1);
}
.menu-item:last-child {
border-bottom: none;
}
.menu-text {
color: rgba(255, 255, 255, 0.9);
font-size: 16px;
font-weight: 500;
}
/* 响应式适配 */
@media (max-width: 768px) {
.liquid-glass-card {
width: 90%;
max-width: 350px;
}
.floating-menu {
right: 20px;
width: calc(100% - 40px);
max-width: 280px;
}
.floating-dock {
bottom: 20px;
}
}
/* 环境光效果 */
.ambient-light {
position: fixed;
top: 50%;
left: 50%;
width: 300px;
height: 300px;
background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
border-radius: 50%;
transform: translate(-50%, -50%);
pointer-events: none;
z-index: 0;
animation: pulse 4s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.3; }
50% { transform: translate(-50%, -50%) scale(1.2); opacity: 0.6; }
}
</style>
</head>
<body>
<div class="background-particles" id="particles"></div>
<div class="ambient-light"></div>
<div class="container">
<div class="liquid-glass-card" onclick="toggleMenu()">
<div class="card-content">
<h3 class="card-title">Liquid Glass</h3>
<p class="card-subtitle">iOS 26 Design System</p>
</div>
</div>
<div class="liquid-glass-card">
<div class="card-content">
<h3 class="card-title">Dynamic Reflection</h3>
<p class="card-subtitle">Adaptive Light Response</p>
</div>
</div>
<div class="liquid-glass-card">
<div class="card-content">
<h3 class="card-title">Spatial Floating</h3>
<p class="card-subtitle">Layered Information Hierarchy</p>
</div>
</div>
</div>
<div class="floating-menu" id="floatingMenu">
<div class="menu-item">
<div class="menu-text">设置</div>
</div>
<div class="menu-item">
<div class="menu-text">通知</div>
</div>
<div class="menu-item">
<div class="menu-text">隐私</div>
</div>
<div class="menu-item">
<div class="menu-text">关于</div>
</div>
</div>
<div class="floating-dock">
<div class="dock-item">
<div class="dock-icon">🏠</div>
</div>
<div class="dock-item">
<div class="dock-icon">📱</div>
</div>
<div class="dock-item">
<div class="dock-icon">💬</div>
</div>
<div class="dock-item">
<div class="dock-icon">📧</div>
</div>
<div class="dock-item">
<div class="dock-icon">🎵</div>
</div>
</div>
<script>
// 创建背景粒子
function createParticles() {
const particlesContainer = document.getElementById('particles');
const particleCount = 50;
for (let i = 0; i < particleCount; i++) {
const particle = document.createElement('div');
particle.className = 'particle';
const size = Math.random() * 4 + 1;
const left = Math.random() * 100;
const delay = Math.random() * 20;
const duration = Math.random() * 10 + 15;
particle.style.width = `${size}px`;
particle.style.height = `${size}px`;
particle.style.left = `${left}%`;
particle.style.animationDelay = `${delay}s`;
particle.style.animationDuration = `${duration}s`;
particlesContainer.appendChild(particle);
}
}
// 菜单切换
function toggleMenu() {
const menu = document.getElementById('floatingMenu');
menu.classList.toggle('active');
}
// 动态光效跟随鼠标
document.addEventListener('mousemove', (e) => {
const ambientLight = document.querySelector('.ambient-light');
const x = e.clientX;
const y = e.clientY;
ambientLight.style.left = `${x}px`;
ambientLight.style.top = `${y}px`;
});
// 设备方向感应模拟
function simulateDeviceMotion() {
const cards = document.querySelectorAll('.liquid-glass-card');
const time = Date.now() * 0.001;
cards.forEach((card, index) => {
const offsetX = Math.sin(time + index) * 2;
const offsetY = Math.cos(time + index * 1.5) * 1;
const rotateX = Math.sin(time + index * 0.5) * 1;
const rotateY = Math.cos(time + index * 0.7) * 1;
card.style.transform = `
translate(${offsetX}px, ${offsetY}px)
rotateX(${rotateX}deg)
rotateY(${rotateY}deg)
`;
});
requestAnimationFrame(simulateDeviceMotion);
}
// 点击外部关闭菜单
document.addEventListener('click', (e) => {
const menu = document.getElementById('floatingMenu');
const cards = document.querySelectorAll('.liquid-glass-card');
let isCardClick = false;
cards.forEach(card => {
if (card.contains(e.target)) {
isCardClick = true;
}
});
if (!menu.contains(e.target) && !isCardClick) {
menu.classList.remove('active');
}
});
// 增强的波纹效果
document.addEventListener('click', (e) => {
const ripple = document.createElement('div');
ripple.style.position = 'absolute';
ripple.style.borderRadius = '50%';
ripple.style.background = 'rgba(255, 255, 255, 0.3)';
ripple.style.transform = 'scale(0)';
ripple.style.animation = 'ripple 0.6s linear';
ripple.style.pointerEvents = 'none';
const rect = e.target.getBoundingClientRect();
const size = Math.max(rect.width, rect.height);
ripple.style.width = ripple.style.height = size + 'px';
ripple.style.left = (e.clientX - rect.left - size / 2) + 'px';
ripple.style.top = (e.clientY - rect.top - size / 2) + 'px';
e.target.appendChild(ripple);
setTimeout(() => {
ripple.remove();
}, 600);
});
// CSS动画定义
const style = document.createElement('style');
style.textContent = `
@keyframes ripple {
to {
transform: scale(4);
opacity: 0;
}
}
`;
document.head.appendChild(style);
// 初始化
createParticles();
simulateDeviceMotion();
</script>
</body>
</html>
```
这个实现包含了iOS 26 Liquid Glass效果的核心特性：
**🔹 半透明材质感**
- 使用`backdrop-filter: blur()`实现毛玻璃效果
- 多层渐变和阴影模拟玻璃厚度
- 精确的边缘光影过渡
**🔹 动态高光反馈**
- 鼠标悬停时的光线扫过效果
- 环境光跟随鼠标移动
- 模拟设备倾斜的微动画
**🔹 空间漂浮感**
- 悬浮的底栏和菜单
- 多层级的视觉层次
- 点击波纹反馈效果
**🔹 交互细节**
- 流畅的过渡动画
- 3D变换效果
- 响应式适配
这个实现尽可能接近真实的iOS 26 Liquid Glass设计语言，提供了沉浸式的视觉体验。Drag to resize