My Project
Prompt
用html极致模拟iOS26液态玻璃Liquid Glass，类似毛玻璃，可以折射背景光线，尽可能模仿。边缘带有光影折射，模拟真实物理，有空间漂浮感，如Safari的底栏就是悬浮的。
A system prompt was added to support web rendering
好的，这是一个极致模拟 iOS 液态玻璃效果的完整 HTML 实现。
为了达到最佳效果，我采用了以下几种技术组合：
1. **动态背景**：使用多个模糊的、缓慢移动的彩色“星球”作为背景。这比静态背景更能突显玻璃的折射和模糊效果，使其看起来更“液态”。
2. **`backdrop-filter`**：这是实现毛玻璃效果的核心。通过 `blur()` 函数模糊元素下方的所有内容。
3. **多层边框与渐变**：为了模拟边缘的光影折射，我没有使用简单的 `border`。而是通过：
* 一层半透明的 `border` 作为基础。
* 一个 `::before` 伪元素，覆盖在卡片上，并用 `linear-gradient` 创建从左上角到右下角的微妙高光，模拟光线从特定角度照射在玻璃边缘产生的反光。
4. **3D 变换与空间感**：
* 在父容器上设置 `perspective`，创建一个 3D 舞台。
* 使用 JavaScript 实时追踪鼠标位置，并将其转换为 `rotateX` 和 `rotateY` 的 3D 旋转，让玻璃卡片仿佛悬浮在空中，并对你的视线做出反应。
* 卡片内的文字也通过 `transform: translateZ()` 在 Z 轴上略微抬起，增强立体感。
5. **阴影**：使用柔和的 `box-shadow` 在卡片下方投射出阴影，增强其漂浮感和与背景的距离感。
最终效果是一个具有深度、动态光影和交互式物理反馈的、高度逼真的液态玻璃组件。
### 完整代码
将以下所有代码复制到一个 `.html` 文件中，然后用现代浏览器（如 Chrome, Safari, Edge, Firefox）打开即可看到效果。
```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 Liquid Glass Effect</title>
<style>
/* --- 全局与背景设置 --- */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #111;
/* 隐藏溢出的背景球体 */
overflow: hidden;
}
/* 动态背景容器 */
.background-orb-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
}
/* 动态背景球体 */
.orb {
position: absolute;
border-radius: 50%;
/* 强烈的模糊效果，形成柔和的色块 */
filter: blur(120px);
opacity: 0.8;
}
.orb-1 {
width: 450px;
height: 450px;
background: #ff5733; /* 活力橙 */
top: 5%;
left: 10%;
animation: move-orb-1 25s infinite alternate;
}
.orb-2 {
width: 500px;
height: 500px;
background: #33aaff; /* 天空蓝 */
bottom: 5%;
right: 15%;
animation: move-orb-2 30s infinite alternate;
}
.orb-3 {
width: 400px;
height: 400px;
background: #c700ff; /* 霓虹紫 */
bottom: 30%;
left: 20%;
animation: move-orb-3 20s infinite alternate;
}
@keyframes move-orb-1 {
0% { transform: translate(0, 0) scale(1); }
100% { transform: translate(100px, -50px) scale(1.2); }
}
@keyframes move-orb-2 {
0% { transform: translate(0, 0) scale(1); }
100% { transform: translate(-80px, 60px) scale(0.9); }
}
@keyframes move-orb-3 {
0% { transform: translateY(0) scale(1); }
100% { transform: translateY(40px) scale(1.1); }
}
/* --- 3D 容器与卡片 --- */
/* 3D舞台，为子元素提供透视效果 */
.container {
display: flex;
justify-content: center;
align-items: center;
perspective: 1500px; /* 视点深度，数值越大透视效果越弱 */
z-index: 1;
}
/* 液态玻璃卡片本体 */
.glass-card {
position: relative;
width: 340px;
height: 480px;
padding: 30px;
border-radius: 28px; /* 类似iOS的圆角 */
/* 核心：毛玻璃效果 */
background: rgba(255, 255, 255, 0.15); /* 基色，透明度很重要 */
backdrop-filter: blur(35px); /* 关键：模糊背景 */
-webkit-backdrop-filter: blur(35px); /* Safari 兼容 */
/* 基础边框，提供一个微妙的轮廓 */
border: 1.5px solid rgba(255, 255, 255, 0.2);
/* 阴影，营造悬浮感 */
box-shadow: 0 25px 45px rgba(0, 0, 0, 0.2);
/* 开启3D变换上下文 */
transform-style: preserve-3d;
/* 默认状态的变换 */
transform: rotateX(0deg) rotateY(0deg);
}
/* 模拟边缘折射高光的伪元素 */
.glass-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
/* 高光渐变：从左上角的半透明白色到透明，模拟光源反射 */
background: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0) 60%);
/* 必须和父元素保持一致的圆角 */
border-radius: inherit;
/* 让这个高光层不接受鼠标事件 */
pointer-events: none;
}
/* 卡片内容 */
.content {
position: relative;
display: flex;
flex-direction: column;
gap: 20px;
/* 将内容在Z轴上向前移动，使其浮在玻璃表面之上 */
transform: translateZ(50px);
}
.content .icon {
width: 64px;
height: 64px;
fill: rgba(255, 255, 255, 0.9);
filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.3));
}
.content h2 {
font-size: 28px;
font-weight: 600;
color: rgba(255, 255, 255, 0.95);
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.content p {
font-size: 16px;
line-height: 1.6;
color: rgba(255, 255, 255, 0.85);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
</style>
</head>
<body>
<!-- 动态背景 -->
<div class="background-orb-container">
<div class="orb orb-1"></div>
<div class="orb orb-2"></div>
<div class="orb orb-3"></div>
</div>
<!-- 3D 容器 -->
<div class="container">
<!-- 液态玻璃卡片 -->
<div class="glass-card">
<div class="content">
<!-- SVG Icon for crisp rendering -->
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M12 2.69l5.09 5.09L17.09 12 12 7.91 6.91 12 6.91 7.78 12 2.69M12 0L2.69 9.31 6.91 18h10.18l4.22-8.69L12 0zM12 21.31l-4.22-8.69h8.44L12 21.31z"/>
</svg>
<h2>Liquid Glass</h2>
<p>
此效果通过 CSS `backdrop-filter` 属性实现毛玻璃质感，并结合 3D 变换与 JavaScript 鼠标交互，营造出悬浮于动态背景之上的空间感。边缘的光泽则由伪元素渐变模拟，提供更真实的物理反射。
</p>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
const container = document.querySelector('.container');
const card = document.querySelector('.glass-card');
// 定义旋转的最大幅度
const maxRotation = 10; // 单位：度
// 鼠标移动事件
container.addEventListener('mousemove', (e) => {
// 获取容器的尺寸和位置
const rect = container.getBoundingClientRect();
const containerWidth = rect.width;
const containerHeight = rect.height;
// 计算鼠标在容器内的相对位置 (中心为 0,0)
const mouseX = e.clientX - rect.left - containerWidth / 2;
const mouseY = e.clientY - rect.top - containerHeight / 2;
// 根据鼠标位置计算旋转角度
// 鼠标越靠右，rotateY 越大；鼠标越靠下，rotateX 越小（向上翻转）
const rotateY = (mouseX / (containerWidth / 2)) * maxRotation;
const rotateX = -(mouseY / (containerHeight / 2)) * maxRotation;
// 设置卡片跟随鼠标移动时的过渡效果，使其更灵敏
card.style.transition = 'transform 0.1s linear';
// 应用 3D 旋转
card.style.transform = `rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
});
// 鼠标进入事件 - 移除回正时的平滑过渡，让跟随更即时
container.addEventListener('mouseenter', () => {
card.style.transition = 'transform 0.1s linear';
});
// 鼠标离开事件 - 让卡片平滑地恢复到初始状态
container.addEventListener('mouseleave', () => {
// 添加平滑过渡效果
card.style.transition = 'transform 0.5s ease-out';
// 重置旋转
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>iOS-Style Liquid Glass Effect</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
background: linear-gradient(45deg, #a1c4fd, #c2e9fb, #f093fb, #f5576c);
background-size: 400% 400%;
height: 100vh;
overflow: hidden;
animation: gradientShift 15s ease infinite;
display: flex;
justify-content: center;
align-items: center;
}
@keyframes gradientShift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.glass-container {
width: 80vw;
max-width: 380px;
height: 320px;
backdrop-filter: blur(20px) saturate(150%) contrast(95%);
-webkit-backdrop-filter: blur(20px) saturate(150%) contrast(95%);
background: rgba(255, 255, 255, 0.15);
border-radius: 30px;
border: 1px solid rgba(255, 255, 255, 0.3);
box-shadow:
0 10px 30px rgba(0, 0, 0, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.3),
inset 0 -1px 0 rgba(255, 255, 255, 0.05);
position: relative;
overflow: hidden;
transform: perspective(1000px) rotateX(5deg) rotateY(-5deg);
transform-style: preserve-3d;
animation: floatEffect 6s ease-in-out infinite;
transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
.glass-container:before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(
circle,
rgba(255, 255, 255, 0.2) 0%,
rgba(255, 255, 255, 0.04) 30%,
rgba(255, 255, 255, 0) 60%
);
pointer-events: none;
opacity: 0.6;
transform: translateY(20px);
filter: blur(40px);
}
.glass-container:after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 30px;
background: linear-gradient(
to bottom,
rgba(255, 255, 255, 0.05),
rgba(255, 255, 255, 0.01)
);
pointer-events: none;
z-index: 2;
}
.glass-content {
padding: 30px;
color: rgba(255, 255, 255, 0.95);
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
z-index: 3;
position: relative;
}
.glass-title {
font-size: 22px;
font-weight: 600;
margin-bottom: 15px;
color: white;
}
.glass-text {
font-size: 15px;
line-height: 1.6;
color: rgba(255, 255, 255, 0.9);
font-weight: 400;
}
.glass-button {
margin-top: 20px;
padding: 12px 20px;
background: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 16px;
color: white;
font-size: 15px;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
transition: all 0.3s ease;
cursor: pointer;
}
.glass-button:hover {
background: rgba(255, 255, 255, 0.35);
transform: scale(1.05);
}
@keyframes floatEffect {
0% { transform: perspective(1000px) rotateX(5deg) rotateY(-5deg) translateY(0); }
50% { transform: perspective(1000px) rotateX(-3deg) rotateY(3deg) translateY(-10px); }
100% { transform: perspective(1000px) rotateX(5deg) rotateY(-5deg) translateY(0); }
}
/* Subtle noise texture for more realism */
.noise {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
opacity: 0.02;
z-index: -1;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}
/* Floating iOS-style bottom bar mock */
.ios-bar {
position: fixed;
bottom: 40px;
left: 50%;
transform: translateX(-50%);
width: 80vw;
max-width: 400px;
height: 60px;
background: rgba(255, 255, 255, 0.18);
backdrop-filter: blur(40px);
-webkit-backdrop-filter: blur(40px);
border-radius: 35px;
border: 1px solid rgba(255, 255, 255, 0.3);
box-shadow:
0 10px 40px rgba(0, 0, 0, 0.1),
0 1px 0 rgba(255, 255, 255, 0.3),
inset 0 -1px 0 rgba(255, 255, 255, 0.08);
display: flex;
justify-content: center;
align-items: center;
color: white;
font-size: 14px;
font-weight: 500;
letter-spacing: 0.5px;
transform: translateY(0) scale(0.95);
animation: barFloat 6s ease-in-out infinite;
z-index: 100;
}
@keyframes barFloat {
0% { transform: translateY(0) scale(0.95); }
50% { transform: translateY(-10px) scale(1); }
100% { transform: translateY(0) scale(0.95); }
}
</style>
</head>
<body>
<!-- Noise texture overlay -->
<div class="noise"></div>
<!-- Main liquid glass card -->
<div class="glass-container">
<div class="glass-content">
<h1 class="glass-title">Liquid Glass</h1>
<p class="glass-text">
This is a hyper-realistic simulation of iOS 17+ Liquid Glass effect, featuring dynamic blur, adaptive lighting, edge refraction, and floating perspective.
</p>
<div class="glass-button">Learn More</div>
</div>
</div>
<!-- IOS-style floating bottom bar -->
<div class="ios-bar">Safari • Home</div>
<script>
// Subtle interactive tilt effect
const glass = document.querySelector('.glass-container');
const handleMove = (e) => {
const xAxis = (window.innerWidth / 2 - e.pageX) / 30;
const yAxis = (window.innerHeight / 2 - e.pageY) / 30;
glass.style.transform = `perspective(1000px) rotateY(${xAxis}deg) rotateX(${yAxis}deg)`;
};
const handleLeave = () => {
glass.style.transform = `perspective(1000px) rotateX(5deg) rotateY(-5deg)`;
};
glass.addEventListener("mousemove", handleMove);
glass.addEventListener("mouseleave", handleLeave);
</script>
</body>
</html>
```Drag to resize
```html
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
height: 100vh;
background: linear-gradient(45deg, #1a1a1a, #2a2a2a);
overflow: hidden;
}
.container {
position: relative;
width: 300px;
height: 200px;
margin: 100px auto;
perspective: 1000px;
}
.liquid-glass {
position: absolute;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.1);
border-radius: 20px;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
border: 1px solid rgba(255, 255, 255, 0.1);
transform-style: preserve-3d;
transform: translateZ(20px);
overflow: hidden;
}
.liquid-glass::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 100%;
background: linear-gradient(
90deg,
transparent 0%,
rgba(255, 255, 255, 0.1) 20%,
rgba(255, 255, 255, 0.2) 50%,
rgba(255, 255, 255, 0.1) 80%,
transparent 100%
);
transform: translateZ(10px);
mix-blend-mode: overlay;
}
.liquid-glass::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 100%;
background: radial-gradient(
circle at 50% 0%,
rgba(255, 255, 255, 0.4) 0%,
rgba(255, 255, 255, 0.1) 40%,
transparent 70%
);
transform: translateZ(15px);
mix-blend-mode: screen;
}
.shine {
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(
45deg,
transparent 0%,
rgba(255, 255, 255, 0.1) 30%,
rgba(255, 255, 255, 0.2) 50%,
rgba(255, 255, 255, 0.1) 70%,
transparent 100%
);
animation: shine 3s infinite;
transform: translateZ(5px);
}
@keyframes shine {
0% { transform: translate(-50%, -50%) rotate(45deg); }
100% { transform: translate(50%, 50%) rotate(45deg); }
}
.floating {
animation: float 6s ease-in-out infinite;
}
@keyframes float {
0% { transform: translateZ(20px) translateY(0); }
50% { transform: translateZ(20px) translateY(-10px); }
100% { transform: translateZ(20px) translateY(0); }
}
</style>
>
</head>
<body<body>
<div class="container">
<div class="liquid-glass floating">
<div class="shine">"></div>
</div>
</div>
</bodybody>
</html>
``````Drag to resize
以下是一个利用HTML、CSS和JavaScript实现的iOS风格液态玻璃（Liquid Glass）效果模拟，结合毛玻璃、光影折射和悬浮感，适用于仿Safari底栏的场景：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>iOS Liquid Glass Effect</title>
<style>
:root {
--blur-amount: 20px;
--shine-intensity: 0.4;
--gradient-color-1: rgba(255, 255, 255, 0.2);
--gradient-color-2: rgba(255, 255, 255, 0.05);
--shadow-opacity: 0.3;
}
body {
margin: 0;
height: 100vh;
background: linear-gradient(135deg, #667eea, #764ba2);
display: flex;
justify-content: center;
align-items: flex-end;
overflow: hidden;
}
.liquid-glass-bar {
position: relative;
width: 90%;
height: 80px;
margin-bottom: 20px;
border-radius: 40px;
overflow: hidden;
transform: translateZ(0);
backdrop-filter: blur(var(--blur-amount));
-webkit-backdrop-filter: blur(var(--blur-amount));
box-shadow:
0 20px 50px rgba(0,0,0,0.1),
0 5px 20px rgba(0,0,0,0.05);
}
/* 玻璃基底 */
.glass-base {
position: absolute;
inset: 2px;
border-radius: inherit;
background: linear-gradient(
135deg,
var(--gradient-color-1),
var(--gradient-color-2)
);
}
/* 光泽层 */
.shine-overlay {
position: absolute;
inset: 0;
border-radius: inherit;
overflow: hidden;
background: linear-gradient(
135deg,
transparent 40%,
rgba(255,255,255,var(--shine-intensity)) 50%,
transparent 60%
);
mix-blend-mode: overlay;
pointer-events: none;
}
/* 边缘高光 */
.edge-highlight {
position: absolute;
inset: 0;
border-radius: inherit;
padding: 2px;
background: linear-gradient(
to right,
rgba(255,255,255,0.4),
rgba(255,255,255,0) 20%,
rgba(255,255,255,0) 80%,
rgba(255,255,255,0.4)
);
mix-blend-mode: screen;
pointer-events: none;
}
/* 阴影层 */
.shadow-layer {
position: absolute;
inset: 0;
border-radius: inherit;
box-shadow:
0 10px 30px rgba(0,0,0,var(--shadow-opacity)),
inset 0 -2px 10px rgba(0,0,0,0.05);
pointer-events: none;
}
/* 悬浮动画 */
@keyframes floatAnimation {
0%, 100% { transform: translateY(0) rotateX(0deg); }
50% { transform: translateY(-5px) rotateX(-3deg); }
}
.liquid-glass-bar {
animation: floatAnimation 4s ease-in-out infinite;
}
</style>
</head>
<body>
<div class="liquid-glass-bar">
<div class="glass-base"></div>
<div class="shine-overlay"></div>
<div class="edge-highlight"></div>
<div class="shadow-layer"></div>
</div>
<script>
// 动态更新光影效果
const updateShinePosition = () => {
const shine = document.querySelector('.shine-overlay');
const rect = shine.getBoundingClientRect();
shine.style.backgroundPosition = `${-window.innerWidth/2 + rect.left}px ${-window.innerHeight/2 + rect.top}px`;
};
window.addEventListener('resize', updateShinePosition);
window.addEventListener('scroll', updateShinePosition);
window.addEventListener('load', updateShinePosition);
</script>
</body>
</html>
```
关键特征实现说明：
1. **玻璃效果基础**：
- 使用 `backdrop-filter: blur()` 实现毛玻璃效果
- 线性渐变背景模拟液态玻璃的半透明特性
- 多层叠加实现复杂光影效果
2. **光影系统**：
- 通过 `mix-blend-mode` 实现光线折射效果
- 边缘高光使用屏幕混合模式（screen）增强现实感
- 动态光泽层模拟光线反射
3. **物理特性**：
- 多层阴影和内部阴影营造立体感
- 悬浮动画使用 transform 实现物理漂浮效果
- 响应式光线位置计算增强互动性
4. **细节增强**：
- 2px 内边距解决边框模糊问题
- CSS变量方便主题颜色修改
- 硬件加速（translateZ(0)）确保流畅性能
建议在移动设备上查看以获得最佳效果。可以通过调整以下CSS变量定制效果：
- `--blur-amount`：控制模糊程度
- `--shine-intensity`：调整光泽强度
- `--shadow-opacity`：修改阴影透明度
- 渐变颜色值：改变玻璃底色
此实现兼容支持backdrop-filter的现代浏览器（Safari、Chrome、Firefox最新版）。需要替代方案的浏览器可以使用传统的RGBA透明背景作为退化方案。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</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
min-height: 100vh;
background: linear-gradient(135deg, #667eea 0%, #764ba2 25%, #f093fb 50%, #4facfe 75%, #00f2fe 100%);
background-size: 400% 400%;
animation: gradientShift 15s ease infinite;
overflow: hidden;
}
@keyframes gradientShift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.glass-container {
position: fixed;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
z-index: 1000;
}
.liquid-glass {
position: relative;
width: 320px;
height: 70px;
border-radius: 35px;
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.18);
box-shadow:
0 8px 32px rgba(31, 38, 135, 0.37),
inset 0 1px 0 rgba(255, 255, 255, 0.3),
inset 0 -1px 0 rgba(255, 255, 255, 0.2),
0 0 0 1px rgba(255, 255, 255, 0.1);
animation: float 6s ease-in-out infinite;
}
@keyframes float {
0%, 100% {
transform: translateY(0px);
}
50% {
transform: translateY(-5px);
}
}
.glass-shine {
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(
circle at 30% 20%,
rgba(255, 255, 255, 0.2) 0%,
rgba(255, 255, 255, 0.1) 30%,
transparent 70%
);
animation: rotate 20s linear infinite;
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.glass-edge-glow {
position: absolute;
inset: -2px;
border-radius: 37px;
background: linear-gradient(45deg,
transparent,
rgba(255, 255, 255, 0.5),
transparent,
rgba(255, 255, 255, 0.3),
transparent
);
animation: edgeGlow 8s linear infinite;
z-index: -1;
opacity: 0.7;
}
@keyframes edgeGlow {
0% {
transform: rotate(0deg) scale(1);
opacity: 0.7;
}
50% {
transform: rotate(180deg) scale(1.05);
opacity: 0.4;
}
100% {
transform: rotate(360deg) scale(1);
opacity: 0.7;
}
}
.glass-content {
position: relative;
height: 100%;
display: flex;
align-items: center;
justify-content: space-around;
padding: 0 20px;
color: rgba(0, 0, 0, 0.8);
font-size: 14px;
font-weight: 500;
text-shadow: 0 1px 2px rgba(255, 255, 255, 0.3);
}
.glass-icon {
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
font-size: 12px;
}
.particles {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
pointer-events: none;
}
.particle {
position: absolute;
width: 4px;
height: 4px;
background: rgba(255, 255, 255, 0.8);
border-radius: 50%;
animation: float-up 10s infinite linear;
}
@keyframes float-up {
0% {
transform: translateY(100vh) translateX(0);
opacity: 0;
}
10% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
transform: translateY(-100vh) translateX(100px);
opacity: 0;
}
}
.depth-reflection {
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%) scaleY(-1);
width: 300px;
height: 70px;
background: inherit;
filter: blur(5px) opacity(0.3);
scale: 0.95 0.5;
transform-origin: center bottom;
opacity: 0.4;
z-index: -2;
}
</style>
</head>
<body>
<div class="particles" id="particles"></div>
<div class="glass-container">
<div class="liquid-glass">
<div class="glass-edge-glow"></div>
<div class="glass-shine"></div>
<div class="glass-content">
<div class="glass-icon">💎</div>
<span>液态玻璃</span>
<div class="glass-icon">✨</div>
</div>
<div class="depth-reflection"></div>
</div>
</div>
<script>
// 创建浮动粒子
const particlesContainer = document.getElementById('particles');
const particleCount = 20;
for (let i = 0; i < particleCount; i++) {
const particle = document.createElement('div');
particle.className = 'particle';
particle.style.left = Math.random() * 100 + '%';
particle.style.animationDelay = Math.random() * 10 + 's';
particle.style.animationDuration = (10 + Math.random() * 10) + 's';
particlesContainer.appendChild(particle);
}
// 鼠标移动时的光影效果
document.addEventListener('mousemove', (e) => {
const glass = document.querySelector('.liquid-glass');
const rect = glass.getBoundingClientRect();
const centerX = rect.left + rect.width / 2;
const centerY = rect.top + rect.height / 2;
const deltaX = (e.clientX - centerX) / 50;
const deltaY = (e.clientY - centerY) / 50;
glass.style.transform = `translateX(-50%) translateY(-${Math.abs(Math.sin(Date.now() * 0.001)) * 5}px) rotateX(${deltaY}deg) rotateY(${deltaX}deg)`;
});
// 触摸设备支持
document.addEventListener('touchmove', (e) => {
const touch = e.touches[0];
const glass = document.querySelector('.liquid-glass');
const rect = glass.getBoundingClientRect();
const centerX = rect.left + rect.width / 2;
const centerY = rect.top + rect.height / 2;
const deltaX = (touch.clientX - centerX) / 50;
const deltaY = (touch.clientY - centerY) / 50;
glass.style.transform = `translateX(-50%) translateY(-${Math.abs(Math.sin(Date.now() * 0.001)) * 5}px) rotateX(${deltaY}deg) rotateY(${deltaX}deg)`;
});
// 恢复位置
document.addEventListener('mouseleave', () => {
const glass = document.querySelector('.liquid-glass');
glass.style.transform = 'translateX(-50%)';
});
</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 极致液态玻璃模拟</title>
<style>
html, body {
height: 100%;
margin: 0;
background: #0b0e13;
color: #fff;
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", Segoe UI, Roboto, Helvetica, Arial, sans-serif;
overflow: hidden;
}
canvas {
display: block;
width: 100vw;
height: 100vh;
}
.hud {
position: fixed;
top: 16px;
left: 16px;
right: 16px;
display: flex;
align-items: center;
gap: 12px;
pointer-events: auto;
color: #e8ebef;
mix-blend-mode: lighten;
text-shadow: 0 1px 2px rgba(0,0,0,0.5);
font-size: 12px;
user-select: none;
}
.control {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.18);
border-radius: 14px;
padding: 6px 10px;
backdrop-filter: blur(6px) saturate(120%);
-webkit-backdrop-filter: blur(6px) saturate(120%);
}
.control input[type=range] {
width: 160px;
}
.badge {
padding: 6px 10px;
border-radius: 999px;
background: linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.06));
border: 1px solid rgba(255,255,255,0.24);
}
</style>
</head>
<body>
<canvas id="gl"></canvas>
<div class="hud" aria-hidden="true">
<div class="badge">iOS Liquid Glass</div>
<div class="control">
粗糙度
<input id="rough" type="range" min="0" max="1" step="0.001" value="0.35" />
</div>
<div class="control">
折射
<input id="refract" type="range" min="0" max="1" step="0.001" value="0.55" />
</div>
<div class="control">
光晕
<input id="glow" type="range" min="0" max="1" step="0.001" value="0.70" />
</div>
</div>
<script type="module">
const canvas = document.getElementById('gl');
const roughEl = document.getElementById('rough');
const refrEl = document.getElementById('refract');
const glowEl = document.getElementById('glow');
const DPR = Math.min(2.5, window.devicePixelRatio || 1);
function resize() {
const w = Math.floor(innerWidth * DPR);
const h = Math.floor(innerHeight * DPR);
if (canvas.width !== w || canvas.height !== h) {
canvas.width = w;
canvas.height = h;
}
canvas.style.width = innerWidth + 'px';
canvas.style.height = innerHeight + 'px';
}
resize();
addEventListener('resize', resize, { passive: true });
const gl = canvas.getContext('webgl2', { antialias: false, depth: false, stencil: false, premultipliedAlpha: false, alpha: false });
if (!gl) {
alert('需要 WebGL2 支持');
throw new Error('WebGL2 not available');
}
const vert = `#version 300 es
precision highp float;
layout(location=0) in vec2 a_pos;
out vec2 v_uv;
void main() {
v_uv = a_pos * 0.5 + 0.5;
gl_Position = vec4(a_pos, 0.0, 1.0);
}`;
const frag = `#version 300 es
precision highp float;
out vec4 fragColor;
in vec2 v_uv;
uniform vec2 u_res;
uniform float u_time;
uniform vec2 u_mouse; // 0..1
uniform float u_dpr;
uniform float u_rough; // 0..1
uniform float u_refract; // 0..1
uniform float u_glow; // 0..1
// 便捷
float PI = 3.141592653589793;
float TAU = 6.28318530718;
// 随机与噪声
float hash11(float p) {
p = fract(p * 0.1031);
p *= p + 33.33;
p *= p + p;
return fract(p);
}
float hash21(vec2 p) {
vec3 p3 = fract(vec3(p.xyx) * 0.1031);
p3 += dot(p3, p3.yzx + 33.33);
return fract((p3.x + p3.y) * p3.z);
}
vec2 hash22(vec2 p) {
p = vec2(dot(p, vec2(127.1, 311.7)),
dot(p, vec2(269.5, 183.3)));
return fract(sin(p) * 43758.5453);
}
// Perlin-like
float noise(vec2 p) {
vec2 i = floor(p);
vec2 f = fract(p);
vec2 u = f * f * (3.0 - 2.0 * f);
float a = hash21(i + vec2(0.0, 0.0));
float b = hash21(i + vec2(1.0, 0.0));
float c = hash21(i + vec2(0.0, 1.0));
float d = hash21(i + vec2(1.0, 1.0));
return mix(mix(a, b, u.x), mix(c, d, u.x), u.y);
}
float fbm(vec2 p) {
float f = 0.0;
float amp = 0.5;
mat2 m = mat2(1.6, 1.2, -1.2, 1.6);
for (int i = 0; i < 5; i++) {
f += amp * (noise(p));
p = m * p + 0.07;
amp *= 0.5;
}
return f;
}
vec2 fbmGrad(vec2 p) {
float eps = 0.001;
float c = fbm(p);
float dx = fbm(p + vec2(eps, 0.0)) - c;
float dy = fbm(p + vec2(0.0, eps)) - c;
return vec2(dx, dy) / eps;
}
// 变换
mat2 rot(float a) {
float s = sin(a), c = cos(a);
return mat2(c, -s, s, c);
}
// SDF：圆角矩形
float sdRoundRect(vec2 p, vec2 b, float r) {
// p: 局部坐标；b: 半尺寸；r: 圆角半径（在相同坐标系）
vec2 q = abs(p) - (b - vec2(r));
return length(max(q, 0.0)) + min(max(q.x, q.y), 0.0) - r;
}
// 背景：iOS 风格彩色渐变 + 发光流动
vec3 bgColor(vec2 uv, float t) {
// 视差
vec2 parallax = (u_mouse - 0.5) * 0.04;
uv += parallax;
// 大尺度渐变
vec3 c1 = vec3(0.09, 0.13, 0.22);
vec3 c2 = vec3(0.18, 0.09, 0.28);
vec3 c3 = vec3(0.06, 0.20, 0.24);
float gy = smoothstep(0.0, 1.0, uv.y);
vec3 base = mix(c1, c2, gy);
base = mix(base, c3, 0.25 + 0.25 * sin(t * 0.4));
// 软光 blob
vec2 p = uv - 0.5;
p *= rot(0.2 * sin(t * 0.1));
vec3 blob = vec3(0.0);
for (int i = 0; i < 4; i++) {
float fi = float(i);
vec2 o = 0.35 * vec2(sin(t*0.25 + fi*1.7), cos(t*0.23 + fi*1.1));
float r = 0.30 + 0.12 * sin(t * (0.6 + fi*0.1) + fi);
float d = length(p - o);
float g = exp(-pow(d / r, 2.0));
vec3 col = 0.6 + 0.4 * cos(vec3(0.0, 2.0, 4.0) + fi*1.8 + t*0.5);
blob += g * col;
}
blob *= 0.25;
// 光带
vec2 l = uv;
l *= rot(0.5);
float stripe = 0.18 * exp(-50.0 * abs(0.35 - fract(l.x * 1.2 + t*0.05)));
vec3 stripeCol = vec3(0.4,0.6,1.0) * stripe;
// 背景噪声微颗粒
float grain = (hash21(uv * u_res + t) - 0.5) * 0.004;
vec3 col = base + blob + stripeCol + grain;
// 柔和
col = pow(col, vec3(0.95));
return col;
}
// 在 uv 处做多样本模糊采样背景
vec3 bgSampleBlur(vec2 uv, float radius, float aniso, float t) {
// Poisson 盘采样
const vec2 OFFS[8] = vec2[8](
vec2(-0.326,-0.406),
vec2(-0.840,-0.074),
vec2(-0.696, 0.457),
vec2(-0.203, 0.621),
vec2( 0.962,-0.195),
vec2( 0.473,-0.480),
vec2( 0.519, 0.767),
vec2( 0.185,-0.893)
);
vec2 dir = normalize(vec2(0.3 + 0.2*sin(t*0.5), 0.7 + 0.3*cos(t*0.4)));
vec2 basisX = dir;
vec2 basisY = vec2(-dir.y, dir.x);
vec3 acc = vec3(0.0);
float wsum = 0.0;
for (int i = 0; i < 8; i++) {
float fi = float(i);
vec2 o = OFFS[i];
// 椭圆各向异性模糊，稍微顺着边缘方向
vec2 off = (basisX * o.x * aniso + basisY * o.y) * radius;
float w = 0.9 - 0.1 * fi;
acc += bgColor(uv + off, t) * w;
wsum += w;
}
return acc / wsum;
}
// 计算 SDF 梯度（用于边缘法线）
vec2 sdGrad(vec2 p, vec2 b, float r) {
float eps = 1.0 / u_res.y; // 以像素为单位（Y 归一）
float c = sdRoundRect(p, b, r);
float dx = sdRoundRect(p + vec2(eps, 0.0), b, r) - c;
float dy = sdRoundRect(p + vec2(0.0, eps), b, r) - c;
return vec2(dx, dy) / eps;
}
// 玻璃渲染：返回覆盖后的场景色
vec3 renderGlass(vec3 scene, vec2 uv, vec2 center, vec2 halfSize, float radius,
float baseAlpha, float rough, float refr, float glowAmt,
vec3 tint, float edgeBoost, float shadowInt, vec2 shadowOffset) {
float aspect = u_res.x / u_res.y;
// 局部坐标（Y 归一坐标系）
vec2 p = uv - center;
p.x *= aspect;
// SDF
float d = sdRoundRect(p, halfSize, radius);
float px = 1.0 / u_res.y;
// 阴影（漂浮感）
vec2 sp = p + shadowOffset; // 阴影平移
float ds = sdRoundRect(sp, halfSize + vec2(0.015, 0.02), radius + 0.015);
float shadow = smoothstep(0.0, 0.08, ds); // 远离快速消失
shadow = exp(-max(0.0, ds) * 120.0) * shadowInt;
// 在场景上乘性压暗
scene = mix(scene, scene * (1.0 - 0.35 * shadow), 0.9);
// 玻璃内部掩码
float inside = smoothstep(0.0, -3.0*px, d); // d<0 为内部，过渡边沿
inside = 1.0 - inside;
if (inside <= 0.0001) {
// 外部直接返回（只留阴影）
return scene;
}
// 边缘法线（由 SDF 梯度）
vec2 g = sdGrad(p, halfSize, radius);
vec2 edgeN = normalize(g + 1e-6);
// 接近边缘时更强曲率
float edgeMask = smoothstep(0.018, 0.0, abs(d)); // 离边缘越近越接近 1
edgeMask = pow(edgeMask, 0.8);
vec2 nEdge = edgeN * edgeBoost * edgeMask;
// 微表面法线（FBM，类似液体流动）
float t = u_time;
vec2 uvMicro = (uv + vec2(0.0, t*0.015)) * 6.0;
vec2 nMicro = fbmGrad(uvMicro) * (0.8 + 0.2*sin(t*0.7)) * (0.25 + 0.75*rough);
// 将微法线更多作用在内部，边缘为几何曲率主导
nMicro *= (0.3 + 0.7 * (1.0 - edgeMask));
// 总法线（屏幕空间近似）
vec2 n2 = nEdge + nMicro;
// 折射强度（像素感知）
float refrBase = mix(0.02, 0.12, refr); // 0.02~0.12（UV 空间）
vec2 disp = n2 * refrBase;
// 色散（RGB 微分离）
float dispR = 1.03;
float dispG = 1.00;
float dispB = 0.97;
// 模糊半径与各向异性（粗糙度 -> 更强漫散射）
float blurRadius = mix(0.002, 0.018, rough); // UV 空间
float aniso = mix(0.6, 1.2, edgeMask); // 边缘更拉伸
// 背景折射采样 + 模糊
vec3 colR = bgSampleBlur(uv + disp * dispR, blurRadius, aniso, t);
vec3 colG = bgSampleBlur(uv + disp * dispG, blurRadius, aniso, t);
vec3 colB = bgSampleBlur(uv + disp * dispB, blurRadius, aniso, t);
// 合成 RGB 色散
vec3 refrCol = vec3(colR.r, colG.g, colB.b);
// 去饱和一点，冰冷质感
float luma = dot(refrCol, vec3(0.299, 0.587, 0.114));
refrCol = mix(refrCol, vec3(luma), 0.12);
// 内部微雾（毛玻璃）
float fog = mix(0.08, 0.22, rough);
refrCol = mix(refrCol, refrCol * 0.88 + vec3(0.06,0.08,0.10), fog);
// 菲涅尔边缘高光（朝向观察者 -> 近似 n2）
float ndotv = dot(normalize(vec3(n2, 1.0)), vec3(0.0, 0.0, 1.0));
float fres = pow(1.0 - clamp(ndotv, 0.0, 1.0), 3.0);
// 边缘环形光（厚度）
float rim = pow(edgeMask, 1.35);
vec3 rimCol = mix(vec3(0.75,0.85,1.20), vec3(1.0,0.8,0.6), 0.45 + 0.35*sin(t*0.7));
vec3 edgeGlow = rimCol * rim * fres * mix(0.4, 1.2, u_glow);
// 内阴影（边缘厚度带来的暗部）
float innerShadow = smoothstep(0.0, 0.02, -d) * 0.25;
refrCol *= (1.0 - innerShadow);
// 轻微反射（取法线反向的一次采样，模拟环境反射）
vec2 reflVec = reflect(vec2(0.0, -1.0), normalize(n2 + 1e-5));
vec3 refl = bgSampleBlur(uv + reflVec * 0.02, 0.002, 1.0, t);
refl = pow(refl, vec3(1.2));
refrCol = mix(refrCol, refrCol + refl * 0.08, 0.5);
// 上下环境光涂抹（冷暖）
vec3 envTop = vec3(0.55, 0.70, 1.10);
vec3 envBottom = vec3(1.00, 0.75, 0.55);
float vGrad = smoothstep(center.y - halfSize.y*0.8, center.y + halfSize.y*0.8, uv.y);
vec3 env = mix(envTop, envBottom, vGrad) * 0.06;
refrCol += env;
// 轻微色调
refrCol = mix(refrCol, refrCol * tint, 0.3);
// 合成到场景
float alpha = baseAlpha * inside;
// 边界上额外亮度（彩边）
refrCol += edgeGlow;
// 叠加模式：先覆盖玻璃，再微量发光加亮
vec3 outCol = mix(scene, refrCol, clamp(alpha, 0.0, 1.0));
// 光晕外扩（仅在边缘附近）
float halo = smoothstep(0.006, 0.0, abs(d));
halo = pow(halo, 1.5) * 0.25 * u_glow;
vec3 haloCol = rimCol * halo;
outCol += haloCol;
return outCol;
}
void main() {
vec2 uv = v_uv;
float t = u_time;
// 背景
vec3 scene = bgColor(uv, t);
// 形状参数（单位：Y 归一坐标）
float aspect = u_res.x / u_res.y;
// 主卡片（悬浮）
vec2 cardC = vec2(0.5, 0.52 + 0.01*sin(t*0.8));
vec2 cardHalf = vec2(0.29 * (u_res.x/u_res.y), 0.18);
float cardR = 0.045;
scene = renderGlass(scene, uv, cardC, cardHalf, cardR,
0.78, // baseAlpha
mix(0.08, 0.85, u_rough), // rough
mix(0.20, 1.00, u_refract), // refr
u_glow, // glow
vec3(1.06,1.10,1.14), // tint
0.65, // edgeBoost
0.55, // shadowInt
vec2(0.008, 0.014)); // shadowOffset
// Safari 底栏（浮动 pill）
vec2 barC = vec2(0.5, 0.90 + 0.004*sin(t*1.2));
vec2 barHalf = vec2(0.36 * (u_res.x/u_res.y), 0.055);
float barR = 0.035;
scene = renderGlass(scene, uv, barC, barHalf, barR,
0.82,
mix(0.04, 0.70, u_rough),
mix(0.15, 0.90, u_refract),
u_glow,
vec3(1.04,1.08,1.12),
0.70,
0.70,
vec2(0.010, 0.020));
// 小浮点（提升空间感）
vec2 chipC = vec2(0.78 + 0.02*sin(t*0.9), 0.34 + 0.02*cos(t*1.1));
vec2 chipHalf = vec2(0.06 * (u_res.x/u_res.y), 0.035);
float chipR = 0.030;
scene = renderGlass(scene, uv, chipC, chipHalf, chipR,
0.75,
mix(0.02, 0.55, u_rough),
mix(0.20, 0.85, u_refract),
u_glow,
vec3(1.08,1.08,1.16),
0.85,
0.35,
vec2(0.006, 0.012));
// 输出（伽马）
fragColor = vec4(pow(scene, vec3(1.0/1.0)), 1.0);
}`;
function createShader(type, src) {
const sh = gl.createShader(type);
gl.shaderSource(sh, src);
gl.compileShader(sh);
if (!gl.getShaderParameter(sh, gl.COMPILE_STATUS)) {
console.error(gl.getShaderInfoLog(sh));
throw new Error('Shader compile error');
}
return sh;
}
function createProgram(vs, fs) {
const p = gl.createProgram();
gl.attachShader(p, vs);
gl.attachShader(p, fs);
gl.linkProgram(p);
if (!gl.getProgramParameter(p, gl.LINK_STATUS)) {
console.error(gl.getProgramInfoLog(p));
throw new Error('Program link error');
}
return p;
}
const vs = createShader(gl.VERTEX_SHADER, vert);
const fs = createShader(gl.FRAGMENT_SHADER, frag);
const prog = createProgram(vs, fs);
gl.useProgram(prog);
// Fullscreen triangle
const vao = gl.createVertexArray();
gl.bindVertexArray(vao);
const vbo = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
const verts = new Float32Array([
-1, -1,
3, -1,
-1, 3,
]);
gl.bufferData(gl.ARRAY_BUFFER, verts, gl.STATIC_DRAW);
gl.enableVertexAttribArray(0);
gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
// Uniform locations
const u_resLoc = gl.getUniformLocation(prog, 'u_res');
const u_timeLoc = gl.getUniformLocation(prog, 'u_time');
const u_mouseLoc = gl.getUniformLocation(prog, 'u_mouse');
const u_dprLoc = gl.getUniformLocation(prog, 'u_dpr');
const u_roughLoc = gl.getUniformLocation(prog, 'u_rough');
const u_refractLoc = gl.getUniformLocation(prog, 'u_refract');
const u_glowLoc = gl.getUniformLocation(prog, 'u_glow');
let start = performance.now();
let mouse = { x: 0.5, y: 0.5 };
let smoothMouse = { x: 0.5, y: 0.5 };
function onMove(e) {
const rect = canvas.getBoundingClientRect();
const x = (('touches' in e) ? e.touches[0].clientX : e.clientX) - rect.left;
const y = (('touches' in e) ? e.touches[0].clientY : e.clientY) - rect.top;
mouse.x = Math.min(1, Math.max(0, x / rect.width));
mouse.y = Math.min(1, Math.max(0, y / rect.height));
}
addEventListener('mousemove', onMove, { passive: true });
addEventListener('touchmove', onMove, { passive: true });
addEventListener('touchstart', onMove, { passive: true });
function lerp(a, b, t) { return a + (b - a) * t; }
function frame() {
const now = performance.now();
const t = (now - start) / 1000;
// 平滑鼠标
smoothMouse.x = lerp(smoothMouse.x, mouse.x, 0.07);
smoothMouse.y = lerp(smoothMouse.y, mouse.y, 0.07);
gl.viewport(0, 0, canvas.width, canvas.height);
gl.useProgram(prog);
gl.uniform2f(u_resLoc, canvas.width, canvas.height);
gl.uniform1f(u_timeLoc, t);
gl.uniform2f(u_mouseLoc, smoothMouse.x, 1.0 - smoothMouse.y); // 翻转 Y，更贴近直觉
gl.uniform1f(u_dprLoc, DPR);
gl.uniform1f(u_roughLoc, parseFloat(roughEl.value));
gl.uniform1f(u_refractLoc, parseFloat(refrEl.value));
gl.uniform1f(u_glowLoc, parseFloat(glowEl.value));
gl.drawArrays(gl.TRIANGLES, 0, 3);
requestAnimationFrame(frame);
}
requestAnimationFrame(frame);
</script>
</body>
</html>Drag to resize
以下是一个极致模拟 iOS 16+ 液态玻璃（Liquid Glass）效果的 HTML 实现，结合了毛玻璃、光线折射、边缘高光、空间漂浮感等物理特性。使用了 CSS `backdrop-filter`、`mix-blend-mode` 和动态光影技术：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>iOS 16 Liquid Glass Effect</title>
<style>
* {
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, #8E2DE2 0%, #4A00E0 50%, #007AFF 100%);
min-height: 100vh;
overflow: hidden;
position: relative;
background-attachment: fixed;
}
/* 动态光斑背景 - 模拟环境光 */
.light-spots {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 0;
}
.light-spot {
position: absolute;
background: radial-gradient(circle, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 70%);
border-radius: 50%;
filter: blur(80px);
opacity: 0.3;
animation: float 15s infinite ease-in-out;
}
@keyframes float {
0%, 100% { transform: translate(0, 0) scale(1); }
25% { transform: translate(30px, -20px) scale(1.05); }
50% { transform: translate(-20px, 15px) scale(0.95); }
75% { transform: translate(10px, 10px) scale(1.02); }
}
/* 液态玻璃面板 */
.liquid-glass {
position: fixed;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
width: 90%;
max-width: 500px;
height: 120px;
background: rgba(255, 255, 255, 0.12);
backdrop-filter: blur(25px) saturate(180%) contrast(120%);
-webkit-backdrop-filter: blur(25px) saturate(180%) contrast(120%);
border-radius: 30px;
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow:
0 20px 40px rgba(0, 0, 0, 0.1),
0 4px 12px rgba(0, 0, 0, 0.08),
inset 0 1px 4px rgba(255, 255, 255, 0.1);
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
transition: all 0.3s cubic-bezier(0.2, 0.8, 0.4, 1);
overflow: hidden;
isolation: isolate;
}
/* 玻璃内部高光层 - 模拟光线折射 */
.liquid-glass::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background:
linear-gradient(
115deg,
rgba(255,255,255,0.05) 0%,
rgba(255,255,255,0.15) 20%,
rgba(255,255,255,0.05) 40%,
transparent 60%
);
transform: rotate(-5deg);
pointer-events: none;
mix-blend-mode: overlay;
opacity: 0.7;
animation: shine 8s infinite alternate;
}
@keyframes shine {
0% {
transform: rotate(-5deg) translateY(-20px);
opacity: 0.6;
}
100% {
transform: rotate(5deg) translateY(20px);
opacity: 0.9;
}
}
/* 边缘光晕 - 模拟物理折射 */
.liquid-glass::after {
content: '';
position: absolute;
inset: -2px;
z-index: -1;
border-radius: 32px;
background: linear-gradient(
145deg,
rgba(255,255,255,0.2) 0%,
rgba(255,255,255,0.05) 20%,
transparent 50%,
rgba(255,255,255,0.05) 80%,
rgba(255,255,255,0.2) 100%
);
opacity: 0.8;
filter: blur(8px);
pointer-events: none;
}
/* 内容区域 */
.glass-content {
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.05);
border-radius: 24px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.1);
}
/* 悬浮动画 */
@keyframes float-glass {
0%, 100% { transform: translateY(0) translateX(-50%); }
50% { transform: translateY(-5px) translateX(-50%); }
}
.liquid-glass {
animation: float-glass 6s ease-in-out infinite;
}
/* 按钮元素 - 模拟iOS底栏 */
.glass-buttons {
display: flex;
justify-content: space-around;
width: 100%;
padding: 0 30px;
}
.glass-btn {
width: 60px;
height: 60px;
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(15px);
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.1);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
box-shadow:
0 4px 8px rgba(0, 0, 0, 0.05),
inset 0 1px 3px rgba(255, 255, 255, 0.1);
position: relative;
overflow: hidden;
}
.glass-btn::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.3) 0%, transparent 50%);
opacity: 0;
transition: opacity 0.3s ease;
}
.glass-btn:active::before {
opacity: 1;
}
.glass-btn:hover {
transform: translateY(-3px);
box-shadow:
0 8px 16px rgba(0, 0, 0, 0.1),
inset 0 1px 4px rgba(255, 255, 255, 0.15);
}
.glass-btn:active {
transform: translateY(0);
}
/* 图标样式 */
.glass-btn i {
color: white;
font-size: 24px;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
position: relative;
z-index: 1;
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
<!-- 动态光斑背景 -->
<div class="light-spots">
<div class="light-spot" style="width: 300px; height: 300px; top: 10%; left: 10%; animation-delay: 0s;"></div>
<div class="light-spot" style="width: 400px; height: 400px; top: 60%; left: 70%; animation-delay: 1s;"></div>
<div class="light-spot" style="width: 250px; height: 250px; top: 30%; left: 50%; animation-delay: 2s;"></div>
</div>
<!-- 液态玻璃面板 -->
<div class="liquid-glass">
<div class="glass-content">
<div class="glass-buttons">
<div class="glass-btn">
<i class="fas fa-house"></i>
</div>
<div class="glass-btn">
<i class="fas fa-magnifying-glass"></i>
</div>
<div class="glass-btn" style="background: rgba(255, 255, 255, 0.2);">
<i class="fas fa-square-plus" style="font-size: 32px;"></i>
</div>
<div class="glass-btn">
<i class="fas fa-heart"></i>
</div>
<div class="glass-btn">
<i class="fas fa-user"></i>
</div>
</div>
</div>
</div>
<script>
// 动态调整光斑位置
document.addEventListener('mousemove', (e) => {
const spots = document.querySelectorAll('.light-spot');
const x = e.clientX / window.innerWidth;
const y = e.clientY / window.innerHeight;
spots.forEach((spot, index) => {
const speed = 0.05 * (index + 1);
spot.style.transform = `translate(
calc(-50% + ${x * 50 * speed}px),
calc(-50% + ${y * 50 * speed}px)
)`;
});
});
// 模拟触摸涟漪效果
const glass = document.querySelector('.liquid-glass');
glass.addEventListener('mousedown', (e) => {
const ripple = document.createElement('div');
ripple.className = 'ripple';
ripple.style.left = `${e.clientX - glass.getBoundingClientRect().left}px`;
ripple.style.top = `${e.clientY - glass.getBoundingClientRect().top}px`;
glass.appendChild(ripple);
setTimeout(() => {
ripple.remove();
}, 1000);
});
// 添加CSS动画类
const style = document.createElement('style');
style.textContent = `
.ripple {
position: absolute;
border-radius: 50%;
background: rgba(255, 255, 255, 0.3);
transform: scale(0);
animation: ripple 0.6s linear forwards;
pointer-events: none;
}
@keyframes ripple {
to {
transform: scale(4);
opacity: 0;
}
}
`;
document.head.appendChild(style);
</script>
</body>
</html>
```
这个实现包含以下关键特性：
1. **液态玻璃材质**：
- 使用 `backdrop-filter: blur(25px)` 创建毛玻璃效果
- 多层背景混合（`mix-blend-mode: overlay`）模拟光线折射
- 动态高光层创建液体流动感
2. **物理光学效果**：
- 边缘光晕模拟光线折射（`filter: blur(8px)`）
- 内部渐变高光模拟环境光反射
- 动态光斑背景创建空间感
3. **悬浮交互**：
- 微妙的上下浮动动画（`float-glass`）
- 按钮悬停时的轻微抬升效果
- 点击涟漪效果增强交互真实感
4. **iOS风格元素**：
- 圆形图标按钮布局（类似Safari底栏）
- 半透明材质与边框设计
- 触摸反馈效果
5. **动态环境光**：
- 多个光斑随鼠标移动而平移
- 不同速度的光斑创建深度感
这个实现已经非常接近iOS 16+的液态玻璃效果，特别是结合了动态光影和物理折射特性。在支持backdrop-filter的现代浏览器中效果最佳。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>iOS Liquid Glass Simulation</title>
<style>
body {
margin: 0;
padding: 0;
height: 100vh;
overflow: hidden;
background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%); /* Colorful background for refraction simulation */
display: flex;
justify-content: center;
align-items: center;
perspective: 1000px; /* For 3D floating depth */
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.container {
position: relative;
width: 100%;
height: 100%;
overflow: auto;
}
.content {
height: 200vh; /* Scrollable content to demonstrate floating bar */
padding: 20px;
color: #fff;
text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.liquid-glass-bar {
position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%) translateZ(50px); /* 3D floating effect */
width: 80%;
max-width: 600px;
height: 60px;
background: rgba(255, 255, 255, 0.1); /* Semi-transparent base */
backdrop-filter: blur(20px) saturate(180%); /* Frosted glass blur */
border-radius: 30px;
box-shadow:
0 4px 30px rgba(0, 0, 0, 0.1), /* Soft shadow for depth */
inset 0 0 0 1px rgba(255, 255, 255, 0.2), /* Inner highlight */
0 0 10px rgba(255, 255, 255, 0.3); /* Glowing edge */
display: flex;
justify-content: center;
align-items: center;
color: #fff;
font-weight: bold;
animation: float 3s ease-in-out infinite, refract 2s ease-in-out infinite; /* Floating and subtle refraction animation */
transition: transform 0.3s ease;
}
.liquid-glass-bar:hover {
transform: translateX(-50%) translateZ(80px) scale(1.05); /* Hover for more depth */
}
/* Floating animation */
@keyframes float {
0% { transform: translateX(-50%) translateZ(50px) translateY(0); }
50% { transform: translateX(-50%) translateZ(50px) translateY(-5px); }
100% { transform: translateX(-50%) translateZ(50px) translateY(0); }
}
/* Subtle refraction-like wave animation using background position */
@keyframes refract {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
/* Simulate edge refraction with pseudo-elements */
.liquid-glass-bar::before {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: linear-gradient(45deg, rgba(255,255,255,0.3), transparent, rgba(255,255,255,0.3)); /* Refractive gradient */
border-radius: 32px;
filter: blur(5px);
z-index: -1;
animation: refract-glow 4s linear infinite;
}
@keyframes refract-glow {
0% { opacity: 0.5; transform: rotate(0deg); }
50% { opacity: 0.8; transform: rotate(180deg); }
100% { opacity: 0.5; transform: rotate(360deg); }
}
/* For more realistic refraction, use a canvas overlay */
canvas {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
opacity: 0.2; /* Subtle overlay */
}
</style>
</head>
<body>
<div class="container">
<div class="content">
<h1>Scrollable Content</h1>
<p>Scroll down to see the floating liquid glass bar like Safari's bottom bar.</p>
<p>This simulates iOS Liquid Glass with frosted blur, edge refraction, and floating depth.</p>
<!-- Repeat content for scrolling -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="liquid-glass-bar">Liquid Glass Bar (Floating like Safari)</div>
</div>
<canvas id="refractionCanvas"></canvas>
<script>
// Simple canvas script to simulate light refraction waves
const canvas = document.getElementById('refractionCanvas');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
let time = 0;
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
for (let x = 0; x < canvas.width; x++) {
const y = Math.sin(x * 0.01 + time) * 10 + canvas.height / 2;
ctx.lineTo(x, y);
}
ctx.strokeStyle = 'rgba(255,255,255,0.1)';
ctx.stroke();
time += 0.05;
requestAnimationFrame(draw);
}
draw();
window.addEventListener('resize', () => {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
});
</script>
</body>
</html>
```Drag to resize
要实现类似iOS 26的“液态玻璃”（Liquid Glass）效果，尤其是模仿Safari底栏的悬浮和光影折射效果，我们可以使用HTML、CSS以及一点JavaScript来创建。下面是一个示例，尽可能地模仿这种效果。
```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>
body {
margin: 0;
background-image: linear-gradient(to bottom, #87CEEB, #4682B4);
height: 100vh;
overflow: hidden;
font-family: Arial, sans-serif;
}
.liquid-glass {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
width: 80%;
height: 60px;
background: rgba(255, 255, 255, 0.1);
border-radius: 16px;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.2), inset 0 0 10px rgba(255, 255, 255, 0.2);
display: flex;
justify-content: space-around;
align-items: center;
color: #fff;
}
.liquid-glass::before {
content: '';
position: absolute;
top: -10px;
left: 50%;
transform: translateX(-50%);
width: 50%;
height: 20px;
background: radial-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
border-radius: 50%;
filter: blur(5px);
}
.liquid-glass .icon {
font-size: 24px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="liquid-glass">
<div class="icon">←</div>
<div class="icon">⌖</div>
<div class="icon">⌗</div>
<div class="icon">⇧</div>
<div class="icon">⇩</div>
</div>
<script>
// 添加一点动态效果
document.addEventListener('mousemove', (e) => {
const liquidGlass = document.querySelector('.liquid-glass');
const x = e.clientX;
const y = e.clientY;
const centerX = window.innerWidth / 2;
const centerY = window.innerHeight / 2;
const deltaX = x - centerX;
const deltaY = y - centerY;
const tiltX = (deltaY / centerY) * 10;
const tiltY = (deltaX / centerX) * -10;
liquidGlass.style.transform = `translateX(-50%) perspective(1000px) rotateX(${tiltX}deg) rotateY(${tiltY}deg)`;
});
document.addEventListener('mouseout', () => {
const liquidGlass = document.querySelector('.liquid-glass');
liquidGlass.style.transform = 'translateX(-50%)';
});
</script>
</body>
</html>
```
这个示例创建了一个带有“液态玻璃”效果的底栏，模仿了iOS 26 Safari底栏的设计。使用了CSS的`backdrop-filter`和`border-radius`属性来实现模糊和圆角效果，使用了`box-shadow`来增加层次感。通过JavaScript添加了一点动态效果，当鼠标移动时，底栏会随着鼠标的位置倾斜，从而增强了悬浮和立体感。
请注意，`backdrop-filter`属性可能在某些浏览器中不被支持，特别是在较旧的浏览器版本中。为了兼容Safari浏览器，添加了`-webkit-backdrop-filter`前缀。
这个示例仅提供了一个基本的实现，可以根据需要进一步自定义样式和效果。Drag to resize
# iOS 26液态玻璃效果实现
我将创建一个极致模拟iOS液态玻璃效果的页面，具有光线折射、空间漂浮感以及精致的边缘光影处理。
```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液态玻璃效果</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
min-height: 100vh;
background: linear-gradient(135deg, #0f172a, #1e293b);
color: white;
display: flex;
flex-direction: column;
align-items: center;
padding: 1rem;
gap: 2rem;
overflow-x: hidden;
}
.title-section {
text-align: center;
margin-top: 2rem;
z-index: 10;
}
h1 {
font-size: 3rem;
font-weight: 800;
background: linear-gradient(90deg, #cbd5e1, #f1f5f9);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
text-shadow: 0 0 20px rgba(124, 58, 237, 0.3);
}
.subtitle {
padding-top: 1rem;
font-size: 1.2rem;
color: #cbd5e1;
max-width: 600px;
margin: 0 auto;
line-height: 1.6;
}
/* 液态玻璃卡片 */
.glass-container {
display: flex;
flex-direction: column;
width: 90%;
max-width: 1200px;
gap: 1.5rem;
margin-top: 1rem;
}
.glass-card {
position: relative;
display: flex;
flex-direction: column;
padding: 2rem;
border-radius: 20px;
min-height: 200px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
/* 液态玻璃核心效果 */
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(12px) saturate(180%);
-webkit-backdrop-filter: blur(12px) saturate(180%);
/* 边框发光效果 */
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow:
0 4px 30px rgba(0, 0, 0, 0.3),
inset 0 0 0.1px rgba(255, 255, 255, 0.3),
inset 0 -2px 6px rgba(0, 0, 0, 0.1);
}
/* 边缘的高光折射效果 */
.glass-card::before {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
border-radius: 22px;
background: linear-gradient(145deg,
rgba(255,255,255,0.15) 0%,
rgba(255,255,255,0) 20%,
rgba(255,255,255,0) 80%,
rgba(255,255,255,0.1) 100%);
z-index: -1;
filter: blur(8px);
}
.focused {
transform: translateY(-6px) scale(1.02);
box-shadow:
0 10px 40px rgba(46, 77, 255, 0.3),
inset 0 0 1px rgba(255, 255, 255, 0.5),
inset 0 0 15px rgba(255, 255, 255, 0.2);
}
.card-title {
font-size: 1.8rem;
font-weight: 600;
margin-bottom: 1rem;
background: linear-gradient(90deg, #f0e9ff, #ced9fb);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.card-content {
font-size: 1.1rem;
line-height: 1.7;
color: #e2e8f0;
}
/* 浮动的控制栏 */
.floating-bar {
position: fixed;
bottom: 2rem;
width: 85%;
max-width: 800px;
height: 70px;
background: rgba(255, 255, 255, 0.07);
backdrop-filter: blur(15px) saturate(180%);
-webkit-backdrop-filter: blur(15px) saturate(180%);
border-radius: 18px;
display: flex;
padding: 0 20px;
align-items: center;
justify-content: space-between;
box-shadow:
0 5px 25px rgba(0, 0, 0, 0.3),
inset 0 0 0.1px rgba(255, 255, 255, 0.3),
inset 0 -3px 6px rgba(0, 0, 0, 0.15);
border: 1px solid rgba(255, 255, 255, 0.05);
z-index: 100;
transition: transform 0.3s;
}
.floating-bar:hover {
transform: translateY(-10px);
}
/* Control bar icons with ring effect */
.icon {
width: 48px;
height: 48px;
background: rgba(157, 122, 255, 0.15);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.5rem;
box-shadow:
0 2px 10px rgba(46, 77, 255, 0.1),
inset 0 1px 1px rgba(255, 255, 255, 0.2);
cursor: pointer;
transition: all 0.3s ease;
position: relative;
}
.icon:hover {
background: rgba(157, 122, 255, 0.25);
transform: scale(1.1) translateY(-3px);
box-shadow: 0 3px 15px rgba(124, 58, 237, 0.2);
}
.icon::after {
content: '';
position: absolute;
top: -4px;
left: -4px;
right: -4px;
bottom: -4px;
border-radius: 50%;
z-index: -1;
animation: pulse 3s infinite;
}
@keyframes pulse {
0%, 100% {
box-shadow: 0 0 0 1px rgba(147, 197, 253, 0.2);
}
50% {
box-shadow: 0 0 0 4px rgba(147, 197, 253, 0);
}
}
/* Floating bubbles */
.bubble {
position: absolute;
border-radius: 50%;
background: rgba(147, 197, 253, 0.15);
filter: blur(10px);
z-index: -1;
}
/* Responsive design */
@media (max-width: 768px) {
h1 {
font-size: 2.2rem;
}
.glass-container {
width: 95%;
}
.glass-card {
padding: 1.5rem;
}
}
</style>
</head>
<body>
<!-- Title Section -->
<div class="title-section">
<h1>iOS 液态玻璃效果</h1>
<p class="subtitle">物理精准模拟光线折射、边缘光影与空间漂浮感。体验iOS 26全新设计的Liquid Glass质感与互动效果。</p>
</div>
<!-- Glass elements container -->
<div class="glass-container">
<div class="glass-card">
<h2 class="card-title">光线折射效果</h2>
<p class="card-content">玻璃材质精确折射背景光线，边缘形成自然的光晕过渡。通过多层CSS滤镜与渐变背景叠加实现液体流动般的动态视觉效果。</p>
</div>
<div class="glass-card">
<h2 class="card-title">材质透明度</h2>
<p class="card-content">精密控制的透明度配合模糊滤镜，在遮盖与展示间完美平衡。背景内容依稀可见，却不会影响主要内容的可读性与视觉重心。</p>
</div>
<div class="glass-card">
<h2 class="card-title">空间层次感</h2>
<p class="card-content">通过细腻的阴影与悬浮动画营造立体深度，卡片仿佛浮于界面之上。交互带来微妙的视觉反馈，强化虚拟界面与物理现实的关联。</p>
</div>
</div>
<!-- Floating control bar -->
<div class="floating-bar">
<div class="icon">←</div>
<div class="icon">⌂</div>
<div class="icon" style="background:rgba(99, 102, 241, 0.25);">⌗</div>
<div class="icon">◎</div>
<div class="icon">≡</div>
</div>
<!-- Background bubble elements -->
<script>
document.addEventListener('DOMContentLoaded', function() {
// Create bubbles for background
const container = document.querySelector('.glass-container');
for (let i = 0; i < 12; i++) {
const bubble = document.createElement('div');
bubble.className = 'bubble';
const size = Math.random() * 150 + 50;
bubble.style.width = `${size}px`;
bubble.style.height = `${size}px`;
// Position randomly in the glass-container
bubble.style.top = `${Math.random() * 100}%`;
bubble.style.left = `${Math.random() * 100}%`;
bubble.style.opacity = Math.random() * 0.4 + 0.1;
container.appendChild(bubble);
}
// Interactive effect
const cards = document.querySelectorAll('.glass-card');
cards.forEach(card => {
card.addEventListener('mouseenter', () => {
card.classList.add('focused');
});
card.addEventListener('mouseleave', () => {
card.classList.remove('focused');
});
});
});
</script>
</body>
</html>
```
## 实现亮点
1. **真实的液态玻璃效果**：
- 使用多层模糊效果（backdrop-filter）实现光线折射
- 透明玻璃效果配合细腻的光线过渡
- 内发光、外发光和多重阴影实现深度感
2. **边缘光影折射**：
- 使用::before伪元素创建边缘高光
- 渐变边框模拟玻璃折射光晕
- 多层次阴影创建厚度和曲率感
3. **空间漂浮感**：
- 浮动控制栏hover时上浮
- 卡片悬停时上浮、放大并增强阴影
- 微妙的动画过渡效果
4. **互动效果**：
- 图标悬停有微缩放大效果和脉冲动画
- 卡片悬停产生浮起并增强阴影
- 控制栏悬停整体上浮
5. **背景细节**：
- 渐变深色背景凸显玻璃效果
- 随机泡泡元素作为折射背景元素
- 磨砂质感增强透明感
此实现完全使用CSS和少量JavaScript，无需外部依赖，在现代浏览器中可以完美呈现iOS 26的液态玻璃设计美学。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 液态玻璃效果</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
background:
radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.3) 0%, transparent 50%),
radial-gradient(circle at 40% 40%, rgba(120, 219, 255, 0.2) 0%, transparent 50%),
linear-gradient(135deg, #667eea 0%, #764ba2 100%);
overflow: hidden;
position: relative;
}
/* 动态背景粒子 */
.background-orbs {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
}
.orb {
position: absolute;
border-radius: 50%;
background: linear-gradient(45deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.3));
animation: float 6s ease-in-out infinite;
}
.orb:nth-child(1) {
width: 300px;
height: 300px;
top: -150px;
left: -150px;
animation-delay: 0s;
}
.orb:nth-child(2) {
width: 200px;
height: 200px;
top: 50%;
right: -100px;
animation-delay: 2s;
}
.orb:nth-child(3) {
width: 150px;
height: 150px;
bottom: -75px;
left: 30%;
animation-delay: 4s;
}
@keyframes float {
0%, 100% { transform: translateY(0) rotate(0deg); }
33% { transform: translateY(-20px) rotate(120deg); }
66% { transform: translateY(10px) rotate(240deg); }
}
/* 液态玻璃容器 */
.glass-container {
position: absolute;
bottom: 40px;
left: 50%;
transform: translateX(-50%);
width: 90%;
max-width: 400px;
height: 80px;
perspective: 1000px;
}
.liquid-glass {
width: 100%;
height: 100%;
background:
linear-gradient(135deg,
rgba(255, 255, 255, 0.25) 0%,
rgba(255, 255, 255, 0.1) 25%,
rgba(255, 255, 255, 0.05) 50%,
rgba(255, 255, 255, 0.1) 75%,
rgba(255, 255, 255, 0.2) 100%
);
backdrop-filter: blur(20px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 25px;
position: relative;
overflow: hidden;
transform: translateZ(0);
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.15),
0 2px 8px rgba(0, 0, 0, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.4),
inset 0 -1px 0 rgba(255, 255, 255, 0.1);
animation: float-glass 4s ease-in-out infinite;
}
@keyframes float-glass {
0%, 100% {
transform: translateY(0) rotateX(0deg);
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.15),
0 2px 8px rgba(0, 0, 0, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.4),
inset 0 -1px 0 rgba(255, 255, 255, 0.1);
}
50% {
transform: translateY(-3px) rotateX(1deg);
box-shadow:
0 12px 40px rgba(0, 0, 0, 0.2),
0 4px 12px rgba(0, 0, 0, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.5),
inset 0 -1px 0 rgba(255, 255, 255, 0.2);
}
}
/* 边缘光效 */
.liquid-glass::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 25px;
padding: 1px;
background:
linear-gradient(45deg,
transparent,
rgba(255, 255, 255, 0.3),
transparent,
rgba(255, 255, 255, 0.1),
transparent
);
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask-composite: xor;
-webkit-mask-composite: xor;
}
/* 内部光折射效果 */
.liquid-glass::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.3) 0%, transparent 50%),
radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.2) 0%, transparent 50%),
linear-gradient(135deg, transparent 0%, rgba(255, 255, 255, 0.1) 50%, transparent 100%);
border-radius: 25px;
animation: shimmer 3s ease-in-out infinite;
}
@keyframes shimmer {
0%, 100% { opacity: 1; }
50% { opacity: 0.7; }
}
/* 玻璃内容 */
.glass-content {
position: relative;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
padding: 0 30px;
}
.glass-icon {
width: 24px;
height: 24px;
margin: 0 15px;
background: rgba(255, 255, 255, 0.8);
border-radius: 8px;
position: relative;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
cursor: pointer;
}
.glass-icon:hover {
background: rgba(255, 255, 255, 0.9);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(255, 255, 255, 0.3);
}
/* 高级光影反射 */
.reflection {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
linear-gradient(135deg,
rgba(255, 255, 255, 0.0) 0%,
rgba(255, 255, 255, 0.1) 25%,
rgba(255, 255, 255, 0.0) 26%,
rgba(255, 255, 255, 0.0) 74%,
rgba(255, 255, 255, 0.1) 75%,
rgba(255, 255, 255, 0.0) 100%
);
border-radius: 25px;
animation: reflection-move 4s linear infinite;
pointer-events: none;
}
@keyframes reflection-move {
0% { transform: translateX(-100%) skewX(-15deg); }
100% { transform: translateX(400%) skewX(-15deg); }
}
/* 环境光散射 */
.ambient-light {
position: absolute;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
width: 420px;
height: 100px;
background:
radial-gradient(ellipse 200px 50px at center,
rgba(255, 255, 255, 0.1) 0%,
transparent 70%
);
animation: ambient-pulse 3s ease-in-out infinite;
}
@keyframes ambient-pulse {
0%, 100% { opacity: 0.5; transform: translateX(-50%) scale(1); }
50% { opacity: 0.8; transform: translateX(-50%) scale(1.1); }
}
/* 顶部玻璃卡片 */
.top-glass-card {
position: absolute;
top: 100px;
right: 50px;
width: 200px;
height: 120px;
background:
linear-gradient(135deg,
rgba(255, 255, 255, 0.2) 0%,
rgba(255, 255, 255, 0.05) 100%
);
backdrop-filter: blur(15px) saturate(200%);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 20px;
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
animation: float-card 5s ease-in-out infinite;
}
@keyframes float-card {
0%, 100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-10px) rotate(1deg); }
}
/* 左侧玻璃卡片 */
.left-glass-card {
position: absolute;
top: 50%;
left: 30px;
width: 150px;
height: 80px;
background:
linear-gradient(45deg,
rgba(255, 255, 255, 0.15) 0%,
rgba(255, 255, 255, 0.08) 100%
);
backdrop-filter: blur(12px) saturate(150%);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 15px;
box-shadow:
0 6px 24px rgba(0, 0, 0, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
animation: float-card-left 6s ease-in-out infinite reverse;
}
@keyframes float-card-left {
0%, 100% { transform: translateX(0) rotate(0deg); }
50% { transform: translateX(5px) rotate(-1deg); }
}
</style>
</head>
<body>
<div class="background-orbs">
<div class="orb"></div>
<div class="orb"></div>
<div class="orb"></div>
</div>
<div class="ambient-light"></div>
<div class="top-glass-card"></div>
<div class="left-glass-card"></div>
<div class="glass-container">
<div class="liquid-glass">
<div class="reflection"></div>
<div class="glass-content">
<div class="glass-icon"></div>
<div class="glass-icon"></div>
<div class="glass-icon"></div>
<div class="glass-icon"></div>
<div class="glass-icon"></div>
</div>
</div>
</div>
<script>
// 添加鼠标跟踪光效
document.addEventListener('mousemove', (e) => {
const glassElements = document.querySelectorAll('.liquid-glass, .top-glass-card, .left-glass-card');
glassElements.forEach(glass => {
const rect = glass.getBoundingClientRect();
const x = ((e.clientX - rect.left) / rect.width) * 100;
const y = ((e.clientY - rect.top) / rect.height) * 100;
glass.style.setProperty('--mouse-x', `${x}%`);
glass.style.setProperty('--mouse-y', `${y}%`);
// 添加动态光效
const intensity = Math.min(1, Math.max(0, 1 - (Math.abs(x - 50) + Math.abs(y - 50)) / 100));
glass.style.filter = `blur(${20 - intensity * 5}px) saturate(${180 + intensity * 20}%) brightness(${100 + intensity * 10}%)`;
});
});
// 添加陀螺仪效果（模拟设备倾斜）
let tiltX = 0, tiltY = 0;
setInterval(() => {
tiltX += (Math.random() - 0.5) * 0.5;
tiltY += (Math.random() - 0.5) * 0.5;
tiltX = Math.max(-2, Math.min(2, tiltX));
tiltY = Math.max(-2, Math.min(2, tiltY));
document.querySelector('.liquid-glass').style.transform =
`translateZ(0) rotateX(${tiltY}deg) rotateY(${tiltX}deg)`;
}, 100);
// 添加触摸涟漪效果
document.querySelectorAll('.glass-icon').forEach(icon => {
icon.addEventListener('click', (e) => {
const ripple = document.createElement('div');
ripple.style.cssText = `
position: absolute;
width: 50px;
height: 50px;
background: radial-gradient(circle, rgba(255,255,255,0.6) 0%, transparent 70%);
border-radius: 50%;
transform: translate(-50%, -50%) scale(0);
animation: ripple 0.6s ease-out;
pointer-events: none;
top: 50%;
left: 50%;
`;
icon.appendChild(ripple);
setTimeout(() => ripple.remove(), 600);
});
});
// 添加涟漪动画
const style = document.createElement('style');
style.textContent = `
@keyframes ripple {
to {
transform: translate(-50%, -50%) scale(2);
opacity: 0;
}
}
`;
document.head.appendChild(style);
</script>
</body>
</html>
```Drag to resize