帮我仿照苹果最近在iOS26上发布的液态玻璃效果使用html。不计一切代价尽可能的仿照。Liquid Glass 的核心设计特性半透明材质感：采用毛玻璃式视觉特效，带有光影折射和模糊，增强界面的材质反馈感。例如，在 iOS 26 的多任务视图中，应用窗口的背景被真实模拟出玻璃般的折射感，边缘带有类似玻璃厚度的光影过渡。动态高光反馈：根据设备角度、环境光变化，界面随时改变反光形态，产生“真实物理”的漂浮视觉体验。空间漂浮感：底栏、弹窗、菜单均浮于界面之上，强调信息层次和焦点引导。例如 Safari 中的地址栏与菜单栏，会在页面滚动时以轻盈方式浮现，不再有明确的边界，而是以模糊的玻璃感暗示其层级。

Header image for 帮我仿照苹果最近在iOS26上发布的液态玻璃效果使用html。不计一切代价尽可能的仿照。Liquid Glass 的核心设计特性半透明材质感：采用毛玻璃式视觉特效，带有光影折射和模糊，增强界面的材质反馈感。例如，在 iOS 26 的多任务视图中，应用窗口的背景被真实模拟出玻璃般的折射感，边缘带有类似玻璃厚度的光影过渡。动态高光反馈：根据设备角度、环境光变化，界面随时改变反光形态，产生“真实物理”的漂浮视觉体验。空间漂浮感：底栏、弹窗、菜单均浮于界面之上，强调信息层次和焦点引导。例如 Safari 中的地址栏与菜单栏，会在页面滚动时以轻盈方式浮现，不再有明确的边界，而是以模糊的玻璃感暗示其层级。

帮我仿照苹果最近在iOS26上发布的液态玻璃效果使用html。不计一切代价尽可能的仿照。Liquid Glass 的核心设计特性半透明材质感：采用毛玻璃式视觉特效，带有光影折射和模糊，增强界面的材质反馈感。例如，在 iOS 26 的多任务视图中，应用窗口的背景被真实模拟出玻璃般的折射感，边缘带有类似玻璃厚度的光影过渡。动态高光反馈：根据设备角度、环境光变化，界面随时改变反光形态，产生“真实物理”的漂浮视觉体验。空间漂浮感：底栏、弹窗、菜单均浮于界面之上，强调信息层次和焦点引导。例如 Safari 中的地址栏与菜单栏，会在页面滚动时以轻盈方式浮现，不再有明确的边界，而是以模糊的玻璃感暗示其层级。

Prompt

A system prompt was added to support web rendering

OpenAI

下面是一份纯前端实现的「Liquid Glass」示例代码，尽量还原 iOS 26 所展示的半透明玻璃、动态高光与空间漂浮感。直接保存为 .html 文件并在支持 backdrop-filter 的浏览器（Safari / Chromium 110+）中打开即可体验。

```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 · iOS 26 Inspired</title>

<style>
/* 背景：深色多重渐变并缓慢移动，衬托玻璃折射 */
html,body{
  height:100%;margin:0;overflow:hidden;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:#fff;
}
body{
  background:linear-gradient(-45deg,#0f2027,#203a43,#2c5364);
  background-size:400% 400%;
  animation:bgMove 20s ease infinite alternate;
}
@keyframes bgMove{from{background-position:0% 50%}to{background-position:100% 50%}}

/* 3D 容器，所有玻璃元素放在此空间中 */
.scene{
  position:relative;
  width:100%;height:100%;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  gap:60px;
  perspective:1200px;
}

/* 核心：液态玻璃 */
.liquid-glass{
  position:relative;
  width:clamp(240px,60vw,640px);
  min-height:180px;
  padding:40px;
  border-radius:28px;

  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.35);
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  box-shadow:
     0 1px 2px rgba(255,255,255,.2) inset,  /* 边缘高光 */
     0 60px 80px -40px rgba(0,0,0,.6);      /* 悬浮阴影 */

  transform-style:preserve-3d;
  transition:transform .2s cubic-bezier(.4,.2,.2,1);
  overflow:hidden;
}

/* 内层渐变，模拟玻璃厚度 */
.liquid-glass::before{
  content:"";
  position:absolute;inset:0;
  border-radius:inherit;
  background:linear-gradient(135deg,rgba(255,255,255,.18) 0%,rgba(255,255,255,0) 100%);
  pointer-events:none;
}

/* 动态高光（位置实时改变） */
.liquid-glass::after{
  content:"";
  position:absolute;
  top:var(--hl-y,50%);
  left:var(--hl-x,50%);
  width:320px;height:320px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.8) 0%,rgba(255,255,255,0) 60%);
  opacity:var(--hl-o,.3);
  filter:blur(32px);
  transition:opacity .15s linear;
  pointer-events:none;
}

/* 示例文排版 */
h1{margin:0 0 .4em;font-size:2rem;font-weight:600;}
p{margin:0 0 1em;line-height:1.55;}

/* 浮动底栏：随滚动出现/隐藏 */
.bottom-bar{
  position:fixed;
  bottom:24px;left:50%;
  transform:translateX(-50%);
  width:clamp(260px,70vw,720px);height:56px;
  display:flex;align-items:center;justify-content:center;gap:32px;

  border-radius:20px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.25);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  box-shadow:0 20px 40px -16px rgba(0,0,0,.6);

  transition:transform .3s cubic-bezier(.4,.2,.2,1);
}
.bottom-bar.hidden{transform:translate(-50%,120px)}
.icon{
  width:24px;height:24px;
  background:rgba(255,255,255,.8);
  border-radius:6px;
}

/* 用于演示滚动效果的超长内容层 */
.content-area{height:200vh;width:100%;position:absolute;top:0;left:0;}
</style>
</head>

<body>
  <div class="content-area"></div><!-- 仅用于产生页面滚动 -->

  <div class="scene">
    <div class="liquid-glass">
      <h1>Liquid Glass</h1>
      <p>这是一块仿 iOS 26 的液态玻璃面板。拖动鼠标或倾斜设备即可看到光影随着角度流动，营造真实的玻璃折射与高光。</p>
      <p>利用 <code>backdrop-filter</code>、3D 透视与 <code>DeviceOrientation</code> / <code>mousemove</code> 事件实时更新光斑位置。</p>
    </div>

    <div class="liquid-glass" style="min-height:120px;padding:30px 40px;">
      <p>多任务视图卡片示例：多块玻璃悬浮于同一 3D 空间中，通过阴影与动态高光强化层级。</p>
    </div>
  </div>

  <div class="bottom-bar" id="bottomBar">
    <div class="icon"></div><div class="icon"></div><div class="icon"></div>
  </div>

<script>
/* 获取所有玻璃元素 */
const cards = document.querySelectorAll('.liquid-glass');

/* -------- 设备方向（移动端） -------- */
function handleOrientation(evt){
  if(evt.beta === null) return;
  const x = evt.gamma;          // [-90,90] Y 轴
  const y = evt.beta;           // [-180,180] X 轴
  updateCards(x,y);
}
if(window.DeviceOrientationEvent){
  if(typeof DeviceOrientationEvent.requestPermission==='function'){
      /* iOS 13+ 需手势触发授权 */
      window.addEventListener('click',()=>DeviceOrientationEvent.requestPermission()
        .then(state=>{if(state==='granted'){window.addEventListener('deviceorientation',handleOrientation);}})
        .catch(console.error),{once:true});
  }else{
      window.addEventListener('deviceorientation',handleOrientation);
  }
}

/* -------- 鼠标（桌面端兜底） -------- */
window.addEventListener('mousemove',e=>{
  const x = (e.clientX/window.innerWidth  - .5)*180; // 模拟 gamma
  const y = (e.clientY/window.innerHeight - .5)*180; // 模拟 beta
  updateCards(x,y);
});

/* 更新视觉：旋转 & 高光位置 */
function updateCards(gamma,beta){
  cards.forEach(card=>{
    const rotX = clamp(beta/-15,-8,8); // 正负 8° 内倾斜
    const rotY = clamp(gamma/15,-8,8);

    card.style.transform = `rotateX(${rotX}deg) rotateY(${rotY}deg) translateZ(40px)`;

    const hlX = 50 - rotY*4;  // 反向位移，制造折射
    const hlY = 50 - rotX*4;
    card.style.setProperty('--hl-x',hlX+'%');
    card.style.setProperty('--hl-y',hlY+'%');

    const strength = Math.hypot(rotX,rotY)/8;
    card.style.setProperty('--hl-o',0.25+strength*0.4);
  });
}
function clamp(v,min,max){return v<min?min:v>max?max:v;}

/* -------- 底栏随滚动显示/隐藏 -------- */
const bottomBar=document.getElementById('bottomBar');
let lastScroll=0;
window.addEventListener('scroll',()=>{
  const y=window.scrollY;
  if(y>lastScroll){bottomBar.classList.add('hidden');}
  else{bottomBar.classList.remove('hidden');}
  lastScroll=y;
});
</script>
</body>
</html>
```

核心看点：
1. 玻璃材质：`backdrop-filter: blur(...) saturate(...)` + 半透明背景色，辅以内发光边缘与软阴影，呈现厚玻璃质感。
2. 动态高光：监听 `DeviceOrientationEvent`（或鼠标）更新 CSS 自定义变量，驱动伪元素径向渐变在面板表面滑动。
3. 空间漂浮：透视 + `translateZ` 与投影，配合滚动隐藏／显现的底栏，突出「浮在内容之上」的分层效果。

可直接放到手机或桌面浏览器中体验，倾斜设备或移动鼠标，观察高光与卡片微倾随动。

Drag to resize

Google

Gemini 2.5 Pro

好的，这是一个完全使用 HTML、CSS 和 JavaScript 实现的“液态玻璃 (Liquid Glass)”效果。

它包含了您描述的所有核心特性：**半透明材质感**、**动态高光反馈**以及**空间漂浮感**。为了达到最佳效果，我加入了一个微妙的 3D 倾斜效果来响应鼠标移动，进一步增强了“真实物理”的交互体验。

只需将下面的完整代码复制并保存为一个 `.html` 文件，然后在现代浏览器（如 Chrome, Edge, Safari, 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>液态玻璃效果演示</title>
    
    <!-- 引入谷歌字体和图标库，以模仿苹果的 UI 风格 -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />

    <style>
        /* --- 核心设计：全局样式与背景 --- */
        :root {
            --card-width: 360px;
            --card-height: 500px;
            --card-border-radius: 28px;
        }

        body {
            font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            margin: 0;
            height: 100vh;
            overflow: hidden;
            background: #000;
            color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        /* 动态背景：创建几个流动的彩色光球，模仿环境光 */
        .background-orb-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            filter: blur(100px); /* 关键：将光球模糊成大片色块 */
            z-index: -1;
        }

        .orb {
            position: absolute;
            border-radius: 50%;
            mix-blend-mode: screen; /* 混合模式让颜色叠加更自然 */
            animation: move linear infinite;
        }

        .orb1 {
            width: 400px;
            height: 400px;
            background-color: rgba(0, 122, 255, 0.6); /* 类似 iOS 的蓝色 */
            top: 10%;
            left: 10%;
            animation-duration: 25s;
        }

        .orb2 {
            width: 500px;
            height: 500px;
            background-color: rgba(255, 45, 85, 0.6); /* 类似 iOS 的红色 */
            bottom: 5%;
            right: 15%;
            animation-duration: 30s;
            animation-direction: reverse;
        }
        
        .orb3 {
            width: 350px;
            height: 350px;
            background-color: rgba(52, 199, 89, 0.6); /* 类似 iOS 的绿色 */
            bottom: 30%;
            left: 25%;
            animation-duration: 20s;
        }

        @keyframes move {
            0% { transform: translate(0, 0); }
            25% { transform: translate(100px, -50px) scale(1.1); }
            50% { transform: translate(-30px, 60px); }
            75% { transform: translate(50px, -80px) scale(0.9); }
            100% { transform: translate(0, 0); }
        }

        /* --- 核心设计：玻璃卡片 --- */
        .glass-container {
            /* 设定3D透视空间，为卡片的倾斜做准备 */
            perspective: 1200px; 
        }

        .glass-card {
            width: var(--card-width);
            height: var(--card-height);
            position: relative;
            transform-style: preserve-3d; /* 开启3D空间 */
            transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1); /* 平滑的倾斜回正动画 */
        }
        
        /* 玻璃卡片的“材质”层 */
        .glass-material {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            
            /* 1. 半透明材质感 (Translucent Material) */
            background: rgba(255, 255, 255, 0.1); /* 基础的半透明白色 */
            backdrop-filter: blur(40px) saturate(180%); /* 核心：毛玻璃模糊与饱和度提升 */
            -webkit-backdrop-filter: blur(40px) saturate(180%); /* 兼容 Safari */
            
            /* 3. 空间漂浮感 (Spatial Float) */
            border-radius: var(--card-border-radius);
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3); /* 制造悬浮感的柔和阴影 */
            
            /* 模拟玻璃边缘的微光，增加厚度感 */
            border: 1px solid rgba(255, 255, 255, 0.15);
        }

        /* 2. 动态高光反馈 (Dynamic Highlight) - 使用伪元素实现 */
        .glass-material::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: inherit;
            
            /* 高光效果：一个径向渐变，位置由JS控制 */
            background: radial-gradient(
                circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
                rgba(255, 255, 255, 0.2), 
                transparent 40%
            );
            
            opacity: 0; /* 默认隐藏 */
            transition: opacity 0.3s ease-out; /* 平滑显示/隐藏 */
            pointer-events: none; /* 确保不影响鼠标事件 */
        }

        /* 鼠标悬停时显示高光 */
        .glass-card:hover .glass-material::before {
            opacity: 1;
        }

        /* --- 卡片内容 --- */
        .card-content {
            position: relative; /* 必须在 material 之上 */
            padding: 32px;
            box-sizing: border-box;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            transform: translateZ(50px); /* 让内容在Z轴上更靠前，有立体感 */
        }
        
        .icon-container {
            width: 80px;
            height: 80px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 24px;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .icon-container .material-symbols-outlined {
            font-size: 48px;
            color: rgba(255, 255, 255, 0.9);
            text-shadow: 0 1px 5px rgba(0,0,0,0.2);
        }
        
        h2 {
            font-size: 28px;
            font-weight: 500;
            margin: 0 0 12px 0;
            text-shadow: 0 1px 5px rgba(0,0,0,0.2);
        }

        p {
            font-size: 16px;
            font-weight: 300;
            line-height: 1.6;
            color: rgba(255, 255, 255, 0.8);
            margin: 0;
            flex-grow: 1;
        }

        /* --- 玻璃按钮 --- */
        .button-group {
            display: flex;
            gap: 16px;
            margin-top: 24px;
            width: 100%;
        }

        .glass-button {
            flex: 1;
            padding: 14px 20px;
            font-size: 16px;
            font-weight: 400;
            font-family: inherit;
            color: rgba(255, 255, 255, 0.9);
            
            /* 按钮也采用玻璃材质，但效果更 subtle */
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.15);
            border-radius: 16px;
            
            cursor: pointer;
            transition: all 0.2s ease;
            backdrop-filter: blur(5px);
            -webkit-backdrop-filter: blur(5px);
        }

        .glass-button:hover {
            background: rgba(255, 255, 255, 0.2);
            border-color: rgba(255, 255, 255, 0.3);
        }

        .glass-button.primary {
            background: rgba(0, 122, 255, 0.4);
            border-color: rgba(0, 122, 255, 0.5);
        }

        .glass-button.primary:hover {
            background: rgba(0, 122, 255, 0.6);
            border-color: rgba(0, 122, 255, 0.7);
        }

    </style>
</head>
<body>

    <!-- 动态背景 -->
    <div class="background-orb-container">
        <div class="orb orb1"></div>
        <div class="orb orb2"></div>
        <div class="orb orb3"></div>
    </div>

    <!-- 玻璃卡片容器 -->
    <div class="glass-container">
        <div class="glass-card" id="glass-card">
            
            <!-- 玻璃材质层，负责视觉效果 -->
            <div class="glass-material"></div>
            
            <!-- 内容层 -->
            <div class="card-content">
                <div class="icon-container">
                    <span class="material-symbols-outlined">airwave</span>
                </div>
                <h2>液态玻璃</h2>
                <p>一个仿照未来设计风格的液态玻璃效果演示。将光标悬停在卡片上，体验动态光影、材质反馈与空间交互。</p>
                <div class="button-group">
                    <button class="glass-button">了解更多</button>
                    <button class="glass-button primary">立即体验</button>
                </div>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const card = document.getElementById('glass-card');
            const material = card.querySelector('.glass-material');

            if (!card) return;

            // --- 动态高光 & 3D倾斜 ---
            card.addEventListener('mousemove', (e) => {
                const rect = card.getBoundingClientRect();
                
                // 1. 计算鼠标在卡片内的相对坐标
                const mouseX = e.clientX - rect.left;
                const mouseY = e.clientY - rect.top;

                // 2. 更新高光伪元素的位置
                material.style.setProperty('--mouse-x', `${mouseX}px`);
                material.style.setProperty('--mouse-y', `${mouseY}px`);

                // 3. 计算卡片倾斜角度
                const centerX = rect.width / 2;
                const centerY = rect.height / 2;
                
                // 距离中心的偏移量 (-1 to 1)
                const rotateX = (mouseY - centerY) / centerY * -1; // Y轴移动影响X轴旋转
                const rotateY = (mouseX - centerX) / centerX;       // X轴移动影响Y轴旋转
                const tiltStrength = 15; // 倾斜强度

                card.style.transform = `rotateX(${rotateX * tiltStrength}deg) rotateY(${rotateY * tiltStrength}deg)`;
            });

            // 鼠标离开时，平滑地将卡片恢复原状
            card.addEventListener('mouseleave', () => {
                card.style.transform = 'rotateX(0deg) rotateY(0deg)';
            });
        });
    </script>

</body>
</html>
```

Drag to resize

MiniMax

MiniMax M1 40k

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>iOS 26 Liquid Glass Effect</title>
    <style>
        :root {
            --glass-bg: rgba(255, 255, 255, 0.1);
            --glass-blur: blur(20px);
            --highlight-intensity: 0.5;
        }

        body {
            margin: 0;
            height: 3000px;
            background: linear-gradient(45deg, #f3f9ff, #e6f0ff);
            overflow-x: hidden;
        }

        .liquid-glass {
            position: fixed;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            width: 80%;
            height: 60px;
            background: var(--glass-bg);
            backdrop-filter: var(--glass-blur);
            -webkit-backdrop-filter: var(--glass-blur);
            border-radius: 16px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1),
                        0 0 0 1px rgba(255, 255, 255, 0.2);
            padding: 10px;
            transition: transform 0.3s ease;
            z-index: 100;
        }

        .glass-content {
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 20px;
            color: #333;
            font-family: -apple-system, BlinkMacSystemFont, sans-serif;
        }

        .glass-highlight {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 16px;
            background: linear-gradient(
                135deg,
                rgba(255, 255, 255, var(--highlight-intensity)) 0%,
                rgba(255, 255, 255, 0) 50%
            );
            pointer-events: none;
            transition: opacity 0.3s ease;
        }

        .floating-nav {
            position: fixed;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%);
            background: var(--glass-bg);
            backdrop-filter: var(--glass-blur);
            -webkit-backdrop-filter: var(--glass-blur);
            border-radius: 20px;
            padding: 15px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1),
                        0 0 0 1px rgba(255, 255, 255, 0.2);
            z-index: 99;
            transition: transform 0.3s ease;
        }

        .scroll-container {
            margin-top: 200px;
            padding: 20px;
        }

        .scroll-content {
            height: 1000px;
            background: rgba(255, 255, 255, 0.5);
            border-radius: 20px;
            padding: 20px;
        }

        @supports not (backdrop-filter: blur(20px)) {
            .liquid-glass, .floating-nav {
                background: rgba(255, 255, 255, 0.8);
            }
        }
    </style>
</head>
<body>
    <div class="liquid-glass">
        <div class="glass-content">
            <span>←</span>
            <span>apple.com</span>
            <span>⋯</span>
        </div>
        <div class="glass-highlight"></div>
    </div>

    <div class="floating-nav">
        <div class="glass-content">
            <span>◀</span>
            <span>●</span>
            <span>▶</span>
        </div>
    </div>

    <div class="scroll-container">
        <div class="scroll-content">
            <h1>iOS 26 Liquid Glass Demo</h1>
            <p>Scroll to see floating effect</p>
        </div>
    </div>

    <script>
        // Dynamic highlight effect
        const glass = document.querySelector('.liquid-glass');
        const highlight = document.querySelector('.glass-highlight');
        
        document.addEventListener('mousemove', (e) => {
            const rect = glass.getBoundingClientRect();
            const x = e.clientX - rect.left;
            const y = e.clientY - rect.top;
            
            highlight.style.background = `linear-gradient(
                ${Math.atan2(y, x) * (180/Math.PI)}deg,
                rgba(255, 255, 255, var(--highlight-intensity)) 0%,
                rgba(255, 255, 255, 0) 50%
            )`;
        });

        // Floating effect on scroll
        window.addEventListener('scroll', () => {
            const scrollY = window.scrollY;
            const nav = document.querySelector('.floating-nav');
            
            if (scrollY > 100) {
                nav.style.transform = 'translateX(-50%) translateY(-20px)';
            } else {
                nav.style.transform = 'translateX(-50%)';
            }
        });
    </script>
</body>
</html>
```

这个实现包含以下核心特性：

1. **半透明材质感**：
- 使用backdrop-filter实现毛玻璃效果
- 背景使用半透明rgba颜色
- 边缘使用1px模糊边框模拟玻璃厚度

2. **动态高光反馈**：
- 通过JavaScript实时计算鼠标位置
- 动态生成渐变角度
- 高光强度使用CSS变量控制

3. **空间漂浮感**：
- 底部导航栏使用transform实现浮动效果
- 阴影层次模拟Z轴空间
- 滚动时动态调整位置

4. **增强特性**：
- 兼容不支持backdrop-filter的浏览器
- 动态过渡使用ease缓动函数
- 阴影使用多层叠加模拟真实光影

可以通过以下方式进一步增强：
1. 添加更多动态过渡效果
2. 实现环境光感应（需要设备API）
3. 增加更多iOS交互细节（如点击涟漪效果）
4. 优化移动端触摸事件处理

注意：实际效果受浏览器支持程度影响，建议在最新版Chrome/Firefox/Safari中查看完整效果。

Drag to resize

Moonshot AI

Kimi K2

```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 {
            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-content {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            opacity: 0.8;
        }

        .floating-cards {
            display: flex;
            flex-direction: column;
            gap: 20px;
            padding: 40px 20px;
            max-width: 400px;
            margin: 0 auto;
        }

        .glass-card {
            position: relative;
            padding: 30px;
            border-radius: 24px;
            backdrop-filter: blur(20px) saturate(120%);
            -webkit-backdrop-filter: blur(20px) saturate(120%);
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.15);
            color: white;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            transform: translateY(0);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1),
                        inset 0 0 20px rgba(255, 255, 255, 0.05);
            cursor: pointer;
        }

        .glass-card:hover {
            transform: translateY(-5px);
        }

        .reflection-layer {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            border-radius: 24px;
            overflow: hidden;
            pointer-events: none;
        }

        .liquid-highlight {
            position: absolute;
            width: 200%;
            height: 200%;
            top: -50%;
            left: -50%;
            background: linear-gradient(
                45deg,
                rgba(255, 255, 255, 0) 0%,
                rgba(255, 255, 255, 0.3) 20%,
                rgba(255, 255, 255, 0.1) 40%,
                rgba(255, 255, 255, 0) 60%
            );
            transform: rotate(-30deg);
            animation: liquidFlow 8s infinite;
            opacity: 0.6;
        }

        @keyframes liquidFlow {
            0% {
                transform: rotate(-30deg) translateX(0);
            }
            100% {
                transform: rotate(-30deg) translateX(50%);
            }
        }

        .glow-effect {
            position: absolute;
            inset: 0;
            border-radius: 24px;
            box-shadow: 
                0 0 40px 20px rgba(255, 255, 255, 0.15),
                0 0 80px 40px rgba(255, 255, 255, 0.1),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .glass-card:hover .glow-effect {
            opacity: 1;
        }

        .card-title {
            font-size: 24px;
            font-weight: 600;
            margin-bottom: 10px;
            letter-spacing: -0.5px;
        }

        .card-subtitle {
            font-size: 16px;
            opacity: 0.8;
            margin-bottom: 15px;
        }

        .icon-wrapper {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 56px;
            height: 56px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 12px;
            margin-bottom: 20px;
        }

        .floating-navbar {
            position: fixed;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 20px;
            padding: 10px 15px;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(30px) saturate(150%);
            -webkit-backdrop-filter: blur(30px) saturate(150%);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 100px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
            z-index: 1000;
        }

        .nav-item {
            padding: 12px 16px;
            border-radius: 50px;
            transition: all 0.3s ease;
            cursor: pointer;
            font-size: 14px;
            font-weight: 500;
            color: rgba(255, 255, 255, 0.8);
            text-decoration: none;
        }

        .nav-item:hover {
            background: rgba(255, 255, 255, 0.2);
            color: white;
            transform: scale(1.05);
        }

        .depth-shadow {
            position: absolute;
            inset: 0;
            border-radius: 24px;
            background: linear-gradient(
                to bottom right,
                rgba(255, 255, 255, 0.1) 0%,
                rgba(255, 255, 255, 0.05) 50%,
                transparent 100%
            );
            pointer-events: none;
        }

        .animated-background {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -2;
            opacity: 0.7;
        }

        .bubble {
            position: absolute;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.1);
            animation: float 20s infinite;
            filter: blur(40px);
        }

        @keyframes float {
            0%, 100% {
                transform: translateY(0) rotate(0deg);
                opacity: 1;
            }
            25% {
                transform: translateY(-50px) rotate(90deg);
            }
            50% {
                transform: translateY(-100px) rotate(180deg);
                opacity: 0.5;
            }
            75% {
                transform: translateY(-50px) rotate(270deg);
            }
        }

        .content-layer {
            position: relative;
            z-index: 1;
        }

        .edge-reflection {
            position: absolute;
            inset: 0;
            border-radius: 24px;
            border: 1px solid transparent;
            background: linear-gradient(
                180deg,
                rgba(255, 255, 255, 0.4) 0%,
                rgba(255, 255, 255, 0.2) 50%,
                rgba(255, 255, 255, 0.1) 100%
            ) border-box;
            -webkit-mask: linear-gradient(#fff 0 0) padding-box, 
                          linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
        }
    </style>
</head>
<body>
    <div class="animated-background">
        <div class="bubble" style="width: 80px; height: 80px; top: 20%; left: 10%; animation-delay: 0s;"></div>
        <div class="bubble" style="width: 120px; height: 120px; top: 60%; right: 15%; animation-delay: 4s;"></div>
        <div class="bubble" style="width: 60px; height: 60px; bottom: 20%; left: 20%; animation-delay: 8s;"></div>
        <div class="bubble" style="width: 100px; height: 100px; top: 40%; right: 30%; animation-delay: 12s;"></div>
        <div class="bubble" style="width: 140px; height: 140px; bottom: 40%; left: 5%; animation-delay: 16s;"></div>
    </div>

    <div class="background-content">
        <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center;">
            <h1 style="font-size: 72px; font-weight: 700; color: rgba(255, 255, 255, 0.1); text-shadow: 0 0 20px rgba(255, 255, 255, 0.1);">iOS 26</h1>
        </div>
    </div>

    <div class="floating-cards">
        <div class="glass-card">
            <div class="reflection-layer">
                <div class="liquid-highlight"></div>
                <div class="glow-effect"></div>
                <div class="depth-shadow"></div>
            </div>
            <div class="content-layer">
                <div class="icon-wrapper">
                    <svg width="24" height="24" fill="white" viewBox="0 0 24 24">
                        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
                    </svg>
                </div>
                <div class="card-title">液态玻璃</div>
                <div class="card-subtitle">动态光影反馈</div>
                <p style="font-size: 14px; opacity: 0.7; line-height: 1.6;">iOS 26 的液玻璃效果模拟了真实物理世界的光影变化</p>
            </div>
            <div class="edge-reflection"></div>
        </div>

        <div class="glass-card">
            <div class="reflection-layer">
                <div class="liquid-highlight"></div>
                <div class="glow-effect"></div>
                <div class="depth-shadow"></div>
            </div>
            <div class="content-layer">
                <div class="icon-wrapper">
                    <svg width="24" height="24" fill="white" viewBox="0 0 24 24">
                        <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
                    </svg>
                </div>
                <div class="card-title">空间漂浮</div>
                <div class="card-subtitle">信息层级分离</div>
                <p style="font-size: 14px; opacity: 0.7; line-height: 1.6;">界面元素以浮动的玻璃形态呈现</p>
            </div>
            <div class="edge-reflection"></div>
        </div>

        <div class="glass-card">
            <div class="reflection-layer">
                <div class="liquid-highlight"></div>
                <div class="glow-effect"></div>
                <div class="depth-shadow"></div>
            </div>
            <div class="content-layer">
                <div class="icon-wrapper">
                    <svg width="24" height="24" fill="white" viewBox="0 0 24 24">
                        <path d="M12 2l-5.5 9h11L12 2zm0 3.84L13.93 9h-3.87L12 5.84zM17.5 13c-2.49 0-4.5 2.01-4.5 4.5s2.01 4.5 4.5 4.5 4.5-2.01 4.5-4.5-2.01-4.5-4.5-4.5zM7.5 13C5.01 13 3 15.01 3 17.5S5.01 22 7.5 22 12 19.99 12 17.5 9.99 13 7.5 13z"/>
                    </svg>
                </div>
                <div class="card-title">实时响应</div>
                <div class="card-subtitle">环境光适应</div>
                <p style="font-size: 14px; opacity: 0.7; line-height: 1.6;">根据设备角度和环境光动态调整</p>
            </div>
            <div class="edge-reflection"></div>
        </div>
    </div>

    <nav class="floating-navbar">
        <a href="#" class="nav-item">首页</a>
        <a href="#" class="nav-item">搜索</a>
        <a href="#" class="nav-item">设置</a>
        <a href="#" class="nav-item">更多</a>
    </nav>

    <script>
        // 鼠标跟随高光效果
        document.addEventListener('mousemove', (e) => {
            const cards = document.querySelectorAll('.glass-card');
            cards.forEach(card => {
                const rect = card.getBoundingClientRect();
                const x = e.clientX - rect.left;
                const y = e.clientY - rect.top;
                
                const highlight = card.querySelector('.liquid-highlight');
                if (highlight) {
                    const percentX = (x / rect.width) * 100;
                    const percentY = (y / rect.height) * 100;
                    
                    highlight.style.transform = `translate(-50%, -50%) rotate(${-30 + percentX}deg)`;
                    highlight.style.opacity = 0.3 + (percentY / 100) * 0.3;
                }
            });
        });

        // 模拟环境光变化
        let angle = 0;
        setInterval(() => {
            const body = document.body;
            const hue1 = (Math.sin(angle) * 30 + 240) % 360;
            const hue2 = (Math.sin(angle + 2) * 30 + 300) % 360;
            
            body.style.background = `linear-gradient(${120 + Math.sin(angle) * 60}deg, 
                hsl(${hue1}, 70%, 50%) 0%, 
                hsl(${hue2}, 70%, 60%) 100%)`;
            
            angle += 0.02;
        }, 100);

        // 滚动时的视差效果
        window.addEventListener('scroll', () => {
            const scrollY = window.scrollY;
            const bubbles = document.querySelectorAll('.bubble');
            
            bubbles.forEach((bubble, index) => {
                const speed = 0.5 + index * 0.1;
                bubble.style.transform = `translateY(${scrollY * speed}px)`;
            });
        });

        // 设备陀螺仪效果
        if (window.DeviceOrientationEvent) {
            window.addEventListener('deviceorientation', (event) => {
                const beta = event.beta || 0;
                const gamma = event.gamma || 0;
                
                const highlightElements = document.querySelectorAll('.liquid-highlight');
                highlightElements.forEach(highlight => {
                    const newAngle = -30 + gamma * 0.5;
                    highlight.style.transform = `translate(-50%, -50%) rotate(${newAngle}deg)`;
                    highlight.style.opacity = 0.3 + beta * 0.005;
                });
            });
        }
    </script>
</body>
</html>
```

Drag to resize

xAI

Grok 4

```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;
            overflow: hidden;
            background: url('https://source.unsplash.com/random/1920x1080/?abstract') no-repeat center center fixed;
            background-size: cover;
            display: flex;
            justify-content: center;
            align-items: center;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            color: white;
        }

        /* Glass container */
        .glass-container {
            position: relative;
            width: 80%;
            max-width: 600px;
            height: 300px;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(20px) saturate(180%);
            border-radius: 20px;
            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            overflow: hidden;
            transform: perspective(1000px);
            transition: all 0.3s ease;
        }

        /* Inner content for floating feel */
        .glass-content {
            padding: 20px;
            text-align: center;
        }

        .glass-content h1 {
            font-size: 24px;
            margin-bottom: 10px;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
        }

        .glass-content p {
            font-size: 16px;
            opacity: 0.8;
        }

        /* Floating bottom bar */
        .bottom-bar {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            width: 70%;
            height: 60px;
            background: rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(15px) saturate(200%);
            border-radius: 30px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15), inset 0 1px 2px rgba(255, 255, 255, 0.3);
            display: flex;
            justify-content: space-around;
            align-items: center;
            border: 1px solid rgba(255, 255, 255, 0.25);
            transition: all 0.2s ease;
        }

        .bottom-bar button {
            background: none;
            border: none;
            color: white;
            font-size: 14px;
            cursor: pointer;
            padding: 10px;
            opacity: 0.8;
        }

        /* Dynamic highlight */
        .highlight {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 70%);
            opacity: 0;
            transition: all 0.1s ease;
            pointer-events: none;
        }

        /* Popup menu simulation */
        .popup-menu {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(0.9);
            width: 300px;
            padding: 20px;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(25px) saturate(150%);
            border-radius: 15px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2), inset 0 2px 4px rgba(255, 255, 255, 0.2);
            border: 1px solid rgba(255, 255, 255, 0.3);
            text-align: center;
            opacity: 0;
            transition: all 0.3s ease;
            z-index: 10;
        }

        .popup-menu.active {
            opacity: 1;
            transform: translate(-50%, -50%) scale(1);
        }

        /* Simulate refraction edges */
        .glass-container::before {
            content: '';
            position: absolute;
            top: -2px;
            left: -2px;
            right: -2px;
            bottom: -2px;
            background: linear-gradient(135deg, rgba(255,255,255,0.2), rgba(255,255,255,0));
            border-radius: 22px;
            z-index: -1;
            filter: blur(5px);
        }
    </style>
</head>
<body>
    <div class="glass-container">
        <div class="highlight" id="highlight"></div>
        <div class="glass-content">
            <h1>Liquid Glass Effect</h1>
            <p>Tilt your device to see dynamic highlights and refraction.</p>
        </div>
        <div class="bottom-bar">
            <button onclick="togglePopup()">Menu</button>
            <button>Search</button>
            <button>Settings</button>
        </div>
    </div>

    <div class="popup-menu" id="popup">
        <h2>Floating Menu</h2>
        <p>This menu floats with a glass-like depth and blur.</p>
        <button onclick="togglePopup()">Close</button>
    </div>

    <script>
        // Dynamic highlight based on device orientation
        if (window.DeviceOrientationEvent) {
            window.addEventListener('deviceorientation', function(event) {
                const gamma = event.gamma; // left-right tilt (-90 to 90)
                const beta = event.beta;   // front-back tilt (-180 to 180)

                // Map tilt to highlight position and opacity
                const xPos = (gamma + 90) / 180 * 100; // 0 to 100%
                const yPos = (beta + 180) / 360 * 100; // 0 to 100%
                const opacity = Math.min(Math.abs(gamma) / 90 + Math.abs(beta) / 180, 1) * 0.5;

                const highlight = document.getElementById('highlight');
                highlight.style.background = `radial-gradient(circle at ${xPos}% ${yPos}%, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 70%)`;
                highlight.style.opacity = opacity;

                // Slight 3D rotation for floating feel
                const container = document.querySelector('.glass-container');
                container.style.transform = `perspective(1000px) rotateX(${beta / 4}deg) rotateY(${gamma / 4}deg)`;

                // Adjust bottom bar shadow for depth
                const bottomBar = document.querySelector('.bottom-bar');
                bottomBar.style.boxShadow = `0 ${Math.abs(beta / 2)}px ${Math.abs(gamma / 2) + 20}px rgba(0, 0, 0, 0.15), inset 0 1px 2px rgba(255, 255, 255, 0.3)`;
            });
        }

        // Toggle popup for floating menu demonstration
        function togglePopup() {
            const popup = document.getElementById('popup');
            popup.classList.toggle('active');
        }

        // Simulate environmental light change (random subtle animation)
        setInterval(() => {
            const highlight = document.getElementById('highlight');
            const currentOpacity = parseFloat(highlight.style.opacity) || 0;
            highlight.style.opacity = Math.min(currentOpacity + (Math.random() - 0.5) * 0.1, 0.5);
        }, 1000);
    </script>
</body>
</html>
```

Drag to resize

OpenAI

o4-mini (high)

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>iOS-26 Liquid Glass Demo</title>
  <style>
    /* 全局背景：渐变＋图像（可替换为任意壁纸） */
    html, body {
      margin: 0;
      padding: 0;
      height: 100%;
      overflow: hidden;
      background: linear-gradient(135deg, #667eea, #764ba2), 
                  url('https://source.unsplash.com/random/1920x1080') center/cover no-repeat;
      font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    }
    /* 顶部悬浮栏 */
    nav {
      position: fixed;
      top: 0; left: 0;
      width: 100%; height: 56px;
      padding: 0 20px;
      display: flex; align-items: center;
      color: #fff; font-size: 18px;
      background: rgba(255,255,255,0.1);
      border-bottom: 1px solid rgba(255,255,255,0.2);
      backdrop-filter: blur(20px) saturate(180%);
      -webkit-backdrop-filter: blur(20px) saturate(180%);
      transform: translateY(-100%);
      opacity: 0;
      transition: transform 0.3s ease, opacity 0.3s ease;
      z-index: 100;
    }
    nav.visible {
      transform: translateY(0);
      opacity: 1;
    }
    /* 可滚动区域，模拟多任务视图背景 */
    .wrapper {
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      overflow-y: scroll;
      padding-top: 80px;
      box-sizing: border-box;
    }
    /* 卡片 / 弹窗 / 窗口 */
    .card {
      width: 300px; height: 200px;
      margin: 40px auto;
      border-radius: 20px;
      background: rgba(255,255,255,0.15);
      border: 1px solid rgba(255,255,255,0.3);
      box-shadow: 0 8px 32px rgba(0,0,0,0.1);
      backdrop-filter: blur(20px) saturate(180%);
      -webkit-backdrop-filter: blur(20px) saturate(180%);
      position: relative;
      overflow: hidden;
    }
    /* 动态高光层 */
    .card::before {
      content: "";
      position: absolute;
      top: 0; left: 0;
      width: 100%; height: 100%;
      background: radial-gradient(
        circle at var(--x,50%) var(--y,50%),
        rgba(255,255,255,0.4) 0%,
        transparent 60%
      );
      opacity: 0.4;
      transition: background-position 0.1s;
      pointer-events: none;
    }
  </style>
</head>
<body>
  <nav id="navbar">Liquid Glass Nav</nav>
  <div class="wrapper" id="wrapper">
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
  </div>

  <script>
    // 获取元素
    const cards = document.querySelectorAll('.card');
    const nav = document.getElementById('navbar');
    const wrapper = document.getElementById('wrapper');

    // 鼠标移动时调整高光中心
    window.addEventListener('mousemove', e => {
      cards.forEach(card => {
        const r = card.getBoundingClientRect();
        const x = ((e.clientX - r.left) / r.width) * 100;
        const y = ((e.clientY - r.top)  / r.height)* 100;
        card.style.setProperty('--x', x + '%');
        card.style.setProperty('--y', y + '%');
      });
    });

    // 设备倾斜时也调整高光位置（移动端）
    window.addEventListener('deviceorientation', e => {
      const x = 50 + (e.gamma || 0) / 3;  // 左右倾斜
      const y = 50 + (e.beta  || 0) / 3;  // 前后倾斜
      cards.forEach(card => {
        card.style.setProperty('--x', x + '%');
        card.style.setProperty('--y', y + '%');
      });
    });

    // 滚动时显示/隐藏顶部栏（模拟浮动层出现效果）
    wrapper.addEventListener('scroll', () => {
      if (wrapper.scrollTop > 60) nav.classList.add('visible');
      else nav.classList.remove('visible');
    });
  </script>
</body>
</html>
```

Drag to resize

DeepSeek

DeepSeek R1 0528 (May '25)

# 苹果液态玻璃效果模拟实现

我将为您创建一个高度模仿iOS 26液态玻璃效果的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>苹果液态玻璃效果 - iOS 26风格</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=SF+Pro+Display:wght@300;400;600&display=swap" rel="stylesheet">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
            background: linear-gradient(135deg, #0a062f, #2a115a);
            color: rgba(255, 255, 255, 0.92);
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            perspective: 1000px;
            overflow: hidden;
            padding: 20px;
        }
        
        .scene {
            position: relative;
            width: 100%;
            max-width: 480px;
            height: 90vh;
            border-radius: 40px;
            box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
            background-color: rgba(12, 11, 27, 0.5);
            transform-style: preserve-3d;
            overflow: hidden;
            padding: 50px 20px;
        }
        
        /* 主标题样式 */
        .header {
            text-align: center;
            margin: 30px 0 50px;
        }
        
        h1 {
            font-weight: 600;
            font-size: 2.6rem;
            margin-bottom: 0.8rem;
            background: linear-gradient(90deg, #ffffff, #d2e9ff);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            text-shadow: 0 2px 10px rgba(125, 200, 255, 0.3);
        }
        
        .subtitle {
            font-size: 1.15rem;
            font-weight: 300;
            color: rgba(255, 255, 255, 0.75);
            max-width: 340px;
            margin: 0 auto;
            line-height: 1.5;
        }
        
        /* 液态玻璃浮层容器 */
        .glass-panel {
            position: relative;
            width: 90%;
            min-height: 200px;
            margin: 30px auto;
            border-radius: 26px;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            transform: translateZ(30px);
            transition: transform 0.4s ease;
        }
        
        .glass-panel.primary {
            height: 220px;
            background: rgba(255, 255, 255, 0.08);
            backdrop-filter: blur(20px) saturate(200%);
        }
        
        .glass-panel.secondary {
            height: 140px;
            margin-top: 40px;
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(25px) saturate(200%);
        }
        
        .glass-panel::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            border-radius: 26px;
            box-shadow: 
                inset 0 0 15px rgba(255, 255, 255, 0.1),
                inset 0 1px 0 rgba(255, 255, 255, 0.1),
                inset 1px 0 0 rgba(255, 255, 255, 0.1),
                inset -1px 0 0 rgba(255, 255, 255, 0.1),
                inset 0 -1px 0 rgba(255, 255, 255, 0.1);
            pointer-events: none;
            z-index: 2;
        }
        
        /* 边缘厚度发光效果 */
        .glass-edge {
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 26px;
            z-index: 1;
            opacity: 0.15;
            box-shadow: 
                0 0 40px rgba(98, 147, 255, 0.7),
                0 0 80px rgba(70, 114, 255, 0.45),
                0 0 120px rgba(70, 114, 255, 0.25);
        }
        
        /* 动态高光层 */
        .glass-highlight {
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 26px;
            background: radial-gradient(
                350px circle at var(--mouse-x) var(--mouse-y), 
                rgba(255, 255, 255, 0.18), 
                transparent 50%
            );
            z-index: 3;
            pointer-events: none;
            transition: background 0.1s;
        }
        
        /* 内容样式 */
        .content {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 30px 25px;
            position: relative;
            z-index: 4;
        }
        
        .glass-icon {
            width: 62px;
            height: 62px;
            border-radius: 16px;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05));
            backdrop-filter: blur(10px);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 20px;
        }
        
        .glass-icon svg {
            width: 32px;
            height: 32px;
            opacity: 0.9;
        }
        
        .glass-title {
            font-size: 1.5rem;
            font-weight: 600;
            margin-bottom: 12px;
            letter-spacing: 0.2px;
        }
        
        .glass-subtitle {
            font-size: 1.05rem;
            font-weight: 300;
            text-align: center;
            line-height: 1.6;
            opacity: 0.8;
            max-width: 300px;
        }
        
        /* 底部应用栏 */
        .app-bar {
            position: absolute;
            bottom: 30px;
            left: 20px;
            right: 20px;
            height: 80px;
            border-radius: 24px;
            background: rgba(255, 255, 255, 0.07);
            backdrop-filter: blur(25px) saturate(180%);
            padding: 0 20px;
            display: flex;
            justify-content: space-around;
            align-items: center;
            z-index: 10;
            transform: translateZ(50px) scale(0.96);
        }
        
        .app-item {
            width: 54px;
            height: 54px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s cubic-bezier(0.17, 0.67, 0.35, 1.2);
        }
        
        .app-item svg {
            width: 28px;
            height: 28px;
            opacity: 0.8;
        }
        
        .app-item:hover {
            background: rgba(255, 255, 255, 0.15);
            transform: translateY(-8px);
            cursor: pointer;
        }
        
        /* 浮动装饰元素 */
        .floating-element {
            position: absolute;
            width: 180px;
            height: 180px;
            border-radius: 50%;
            opacity: 0.06;
            filter: blur(40px);
            z-index: -1;
        }
        
        .floating-element:nth-child(1) {
            top: 10%;
            left: 10%;
            background: linear-gradient(45deg, #fc00ff, #00dbde);
            animation: float 16s infinite ease;
        }
        
        .floating-element:nth-child(2) {
            bottom: 20%;
            right: 10%;
            background: linear-gradient(45deg, #3a8bff, #45caff);
            animation: float 14s 4s infinite ease;
        }
        
        /* 响应式样式 */
        .responsive-grid {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 18px;
            width: 100%;
            margin: 15px 0;
        }
        
        .grid-item {
            width: 64px;
            height: 64px;
            border-radius: 18px;
            background: rgba(255, 255, 255, 0.07);
            backdrop-filter: blur(8px);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: transform 0.3s ease, background 0.3s ease;
        }
        
        .grid-item:hover {
            background: rgba(255, 255, 255, 0.15);
            transform: translateY(-4px);
        }
        
        .grid-item svg {
            width: 30px;
            height: 30px;
            opacity: 0.8;
        }
        
        .app-badge {
            padding: 8px 18px;
            border-radius: 50px;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            margin-top: 20px;
            font-size: 0.95rem;
            font-weight: 500;
            letter-spacing: 0.3px;
            transition: all 0.3s ease;
        }
        
        .app-badge:hover {
            background: rgba(255, 255, 255, 0.15);
            transform: translateY(-2px);
        }
        
        /* 动画效果 */
        @keyframes float {
            0%, 100% {
                transform: translate(0, 0);
            }
            25% {
                transform: translate(20px, -20px);
            }
            50% {
                transform: translate(-15px, 25px);
            }
            75% {
                transform: translate(30px, 15px);
            }
        }
        
        /* 媒体查询适配 */
        @media (max-width: 500px) {
            .scene {
                border-radius: 30px;
                height: 85vh;
            }
            
            h1 {
                font-size: 2.2rem;
            }
        }
    </style>
</head>
<body>
    <div class="scene">
        <div class="floating-element"></div>
        <div class="floating-element"></div>
        
        <div class="header">
            <h1>液态玻璃效果</h1>
            <p class="subtitle">iOS 26 全新设计语言，结合光感折射与动态视觉效果</p>
        </div>
        
        <div class="glass-panel primary">
            <div class="glass-edge"></div>
            <div class="glass-highlight" id="highlight1"></div>
            <div class="content">
                <div class="glass-icon">
                    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16Z" stroke="white" stroke-width="2"/>
                        <path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                        <path d="M6 3H8M16 3H18M3 6V8M3 16V18M8 21H6M18 21H16M21 16V18M21 6V8" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
                    </svg>
                </div>
                <h2 class="glass-title">动态高光效果</h2>
                <p class="glass-subtitle">跟随设备角度，产生真实的物理反光</p>
            </div>
        </div>
        
        <div class="responsive-grid">
            <div class="grid-item">
                <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M12 6.5C12.5523 6.5 13 6.94772 13 7.5V11H16.5C17.0523 11 17.5 11.4477 17.5 12C17.5 12.5523 17.0523 13 16.5 13H13V16.5C13 17.0523 12.5523 17.5 12 17.5C11.4477 17.5 11 17.0523 11 16.5V13H7.5C6.94772 13 6.5 12.5523 6.5 12C6.5 11.4477 6.94772 11 7.5 11H11V7.5C11 6.94772 11.4477 6.5 12 6.5Z" fill="white"/>
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23ZM12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z" fill="white"/>
                </svg>
            </div>
            <div class="grid-item">
                <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M9 11L12 14L19 7" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M5 13L8 16" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M15 7H18C19.1046 7 20 7.89543 20 9V18C20 19.1046 19.1046 20 18 20H6C4.89543 20 4 19.1046 4 18V9C4 7.89543 4.89543 7 6 7H10" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
                    <path d="M16 7V5C16 3.89543 15.1046 3 14 3H10C8.89543 3 8 3.89543 8 5V7" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
                </svg>
            </div>
            <div class="grid-item">
                <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M12.4974 4.25098C12.4974 3.69634 12.0521 3.25098 11.4974 3.25098C10.9428 3.25098 10.4974 3.69634 10.4974 4.25098V5.40476C7.03087 5.84199 4.49744 8.78878 4.49744 12.3412C4.49744 16.2183 7.50041 19.3412 11.2485 19.3412C15.1256 19.3412 18.2485 16.2183 18.2485 12.3412C18.2485 8.78878 15.7151 5.84199 12.2485 5.40476V9.75098C12.2485 10.3056 11.8031 10.751 11.2485 10.751C10.6939 10.751 10.2485 10.3056 10.2485 9.75098V5.63326C8.49481 6.22569 7.24854 7.88035 7.24854 9.84121V10.751H8.49854C9.05317 10.751 9.49854 11.1963 9.49854 11.751C9.49854 12.3056 9.05317 12.751 8.49854 12.751H6.74744H5.74744H4.49744C3.9428 12.751 3.49744 12.3056 3.49744 11.751C3.49744 11.1963 3.9428 10.751 4.49744 10.751H5.74854V9.84121C5.74854 7.11994 7.83374 4.82985 10.4974 4.4562V4.25098H10.4985H11.4985H12.4985H12.4974Z" fill="white"/>
                    <circle cx="12" cy="12" r="9.5" stroke="white" stroke-width="1.5"/>
                </svg>
            </div>
            <div class="grid-item">
                <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M12 7L12 17M7 12L17 12" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
                    <circle cx="12" cy="12" r="8.5" stroke="white" stroke-width="1.5"/>
                </svg>
            </div>
        </div>
        
        <div class="content">
            <div class="app-badge">更多玻璃效果 · 轻点探索</div>
        </div>
        
        <div class="app-bar">
            <div class="app-item">
                <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M9.25 8.5H14.75" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
                    <path d="M9.25 12H14.75" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
                    <path d="M9.25 15.5H14.75" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
                    <path d="M5.5 4.75V19.25C5.5 20.6307 6.61929 21.75 8 21.75H16C17.3807 21.75 18.5 20.6307 18.5 19.25V4.75C18.5 3.36929 17.3807 2.25 16 2.25H8C6.61929 2.25 5.5 3.36929 5.5 4.75Z" stroke="white" stroke-width="1.5"/>
                </svg>
            </div>
            <div class="app-item">
                <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M4 13.2799C4 10.5654 6.23827 8.3964 9.0242 8.49857C10.6221 8.55224 12.0858 9.36831 13.0362 10.6467L15.5 13.6235V4.5C15.5 3.94772 15.9477 3.5 16.5 3.5C17.0523 3.5 17.5 3.94771 17.5 4.5V13.6235L19.9638 10.6467C20.9142 9.36831 22.3779 8.55224 23.9758 8.49857C26.7617 8.3964 29 10.5654 29 13.2799C29 15.6882 27.2084 17.7487 24.8559 18.057C23.8115 15.4774 21.31 13.5 18.3999 13.5C16.2986 13.5 14.4308 14.5066 13.2506 16.071C12.0703 14.5066 10.2026 13.5 8.10125 13.5C5.19117 13.5 2.68968 15.4774 1.64538 18.057C-0.707299 17.7487 -2.5 15.6882 -2.5 13.2799C-2.5 10.5654 -0.261728 8.3964 2.5242 8.49857C4.12211 8.55224 5.5858 9.36831 6.5362 10.6467L9 13.6235V4.5C9 3.94772 9.44771 3.5 10 3.5C10.5523 3.5 11 3.94771 11 4.5L11 13.6235L13.4638 10.6467C14.4142 9.36831 15.8779 8.55224 17.4758 8.49857C20.2617 8.3964 22.5 10.5654 22.5 13.2799C22.5 15.4079 21.1487 17.2158 19.2499 17.6792C18.8951 15.6532 17.3 14.0901 15.3175 13.8087C14.312 16.7389 11.688 16.7389 10.6825 13.8087C8.69998 14.0901 7.10491 15.6532 6.75015 17.6792C4.85131 17.2158 3.5 15.4079 3.5 13.2799Z" fill="white"/>
                </svg>
            </div>
            <div class="app-item">
                <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M13 7H8C6.89543 7 6 7.89543 6 9V16C6 17.1046 6.89543 18 8 18H16C17.1046 18 18 17.1046 18 16V11" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
                    <path d="M11 12L18 5M18 5H14.5M18 5V8.5" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
            </div>
            <div class="app-item">
                <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M8.99814 9.21409C9.0168 8.18159 9.86779 7.34271 10.9003 7.32405C11.9328 7.30538 12.7717 8.15637 12.7904 9.18887" stroke="white" stroke-width="1.5"/>
                    <path d="M3.5 5.00146H17.5C19.6609 5.00146 21.5 6.36494 21.5 8.13977V12.7197C21.5 14.4945 19.6609 15.8579 17.5 15.8579H14.3838C14.0972 15.8579 13.8251 15.978 13.6327 16.1875L11.2875 18.759C10.7876 19.3092 10.0002 18.9513 10.0002 18.2126V15.8579H6.5C4.33907 15.8579 2.5 14.4945 2.5 12.7197V8.13977C2.5 6.36494 4.33907 5.00146 6.5 5.00146" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
                </svg>
            </div>
        </div>
    </div>

    <script>
        // 动态高光效果实现
        document.addEventListener('mousemove', (e) => {
            const highlight1 = document.getElementById('highlight1');
            const rect = highlight1.getBoundingClientRect();
            
            // 确保鼠标坐标在元素范围内
            if (rect.width === 0 || rect.height === 0) return;
            
            const x = e.clientX - rect.left;
            const y = e.clientY - rect.top;
            
            highlight1.style.setProperty('--mouse-x', x + 'px');
            highlight1.style.setProperty('--mouse-y', y + 'px');
            
            // 附近元素的轻微浮动效果
            const primaryPanel = document.querySelector('.glass-panel.primary');
            if (primaryPanel) {
                const centerX = rect.left + rect.width / 2;
                const centerY = rect.top + rect.height / 2;
                
                const distX = (e.clientX - centerX) / rect.width;
                const distY = (e.clientY - centerY) / rect.height;
                
                const rotationY = distX * 4; // 轻微Y轴旋转
                const rotationX = distY * -4; // 轻微X轴旋转
                const translateY = distY * -8; // 沿Y轴轻微移动
                
                primaryPanel.style.transform = `
                    rotateX(${rotationX}deg) 
                    rotateY(${rotationY}deg)
                    translateY(${translateY}px)
                `;
            }
        });
        
        // 设备陀螺仪检测（用于真实设备）
        if (window.DeviceOrientationEvent) {
            window.addEventListener('deviceorientation', (event) => {
                const gamma = event.gamma; // 左右倾斜（-90到90）
                const beta = event.beta;   // 前后倾斜（-180到180）
                
                const highlight1 = document.getElementById('highlight1');
                if (!highlight1) return;
                
                // 将陀螺仪角度转换为屏幕坐标（简化处理）
                const rect = highlight1.getBoundingClientRect();
                
                // 将gamma值映射到X坐标（-30到30偏移量）
                const xOffset = (gamma + 90) / 180 * rect.width;
                const xPos = Math.max(20, Math.min(rect.width - 20, xOffset));
                
                // 将beta值映射到Y坐标（-30到30偏移量）
                const yOffset = (beta + 180) / 360 * rect.height;
                const yPos = Math.max(20, Math.min(rect.height - 20, yOffset));
                
                highlight1.style.setProperty('--mouse-x', xPos + 'px');
                highlight1.style.setProperty('--mouse-y', yPos + 'px');
                
                // 面板的3D位移
                const primaryPanel = document.querySelector('.glass-panel.primary');
                if (primaryPanel) {
                    primaryPanel.style.transform = `
                        rotateX(${(beta - 90) * 0.1}deg) 
                        rotateY(${gamma * 0.2}deg)
                    `;
                }
            });
        }
        
        // 悬浮动画效果增强
        const gridItems = document.querySelectorAll('.grid-item');
        gridItems.forEach(item => {
            item.addEventListener('mouseenter', () => {
                // 随机旋转角度（小幅度）
                const rotation = (Math.random() * 10) - 5; // -5° 到 5° 的旋转
                item.style.transform = `translateY(-6px) rotate(${rotation}deg) scale(1.08)`;
            });
            
            item.addEventListener('mouseleave', () => {
                item.style.transform = '';
            });
        });
        
        // 触摸设备兼容性
        document.body.addEventListener('touchstart', (e) => {
            if (e.touches.length > 0) {
                const touch = e.touches[0];
                const mouseMoveEvent = new MouseEvent('mousemove', {
                    clientX: touch.clientX,
                    clientY: touch.clientY,
                    bubbles: true
                });
                document.dispatchEvent(mouseMoveEvent);
            }
        }, {passive: true});
        
        document.body.addEventListener('touchmove', (e) => {
            if (e.touches.length > 0) {
                const touch = e.touches[0];
                const mouseMoveEvent = new MouseEvent('mousemove', {
                    clientX: touch.clientX,
                    clientY: touch.clientY,
                    bubbles: true
                });
                document.dispatchEvent(mouseMoveEvent);
            }
        }, {passive: true});
    </script>
</body>
</html>
```

## 设计特点

这个实现准确捕捉了iOS 26液态玻璃效果的核心特性：

1. **半透明材质感**
   - 使用多层叠加的模糊效果`backdrop-filter: blur()`创造玻璃质感
   - 内部半透明渐变与轮廓边缘发光效果模拟玻璃厚度感
   - 复杂的多重阴影和描边模拟光折射效果

2. **动态高光反馈**
   - 鼠标/触摸移动时显示实时位置高光
   - 支持设备陀螺仪（将在真实移动设备上自动激活）
   - 玻璃面板会随鼠标移动产生微妙的3D位移

3. **空间漂浮感**
   - 底部应用栏悬浮于界面之上
   - 卡片元素具有柔和的Z轴位移效果
   - 所有元素在悬停时有动画过渡效果

4. **细节元素**
   - 浮动透明气泡创造深度感
   - 图标悬浮动画增强交互体验
   - 精心设计的微阴影系统模拟光线衍射

页面在真实移动设备上使用时（如iPhone），将自动启用陀螺仪控制的高光效果，无需用户额外操作。

Drag to resize

Anthropic

Claude 4 Sonnet (Non-reasoning)

```html
<!DOCTYPE html>
<html lang="en">
<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;
            width: 4px;
            height: 4px;
            background: rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            animation: float 6s ease-in-out infinite;
        }

        @keyframes float {
            0%, 100% { transform: translateY(0px) rotate(0deg); opacity: 0.3; }
            50% { transform: translateY(-20px) rotate(180deg); opacity: 0.8; }
        }

        /* 液态玻璃容器基础样式 */
        .liquid-glass {
            background: rgba(255, 255, 255, 0.08);
            backdrop-filter: blur(20px) saturate(180%);
            -webkit-backdrop-filter: blur(20px) saturate(180%);
            border: 1px solid rgba(255, 255, 255, 0.15);
            border-radius: 20px;
            position: relative;
            overflow: hidden;
            transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }

        .liquid-glass::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, 
                transparent, 
                rgba(255, 255, 255, 0.1), 
                transparent
            );
            transition: left 0.5s;
            animation: shimmer 3s infinite;
        }

        @keyframes shimmer {
            0% { left: -100%; }
            50% { left: 100%; }
            100% { left: 100%; }
        }

        .liquid-glass:hover {
            background: rgba(255, 255, 255, 0.12);
            border-color: rgba(255, 255, 255, 0.25);
            transform: translateY(-2px);
            box-shadow: 
                0 20px 40px rgba(0, 0, 0, 0.1),
                0 8px 16px rgba(0, 0, 0, 0.08),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
        }

        /* 主容器 */
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 40px 20px;
            position: relative;
        }

        /* 顶部导航栏 */
        .nav-bar {
            position: fixed;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            width: 90%;
            max-width: 1000px;
            height: 60px;
            z-index: 1000;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 30px;
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(30px) saturate(200%);
            -webkit-backdrop-filter: blur(30px) saturate(200%);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 30px;
            box-shadow: 
                0 8px 32px rgba(0, 0, 0, 0.1),
                inset 0 1px 0 rgba(255, 255, 255, 0.15);
        }

        .nav-bar::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 1px;
            background: linear-gradient(90deg, 
                transparent, 
                rgba(255, 255, 255, 0.3), 
                transparent
            );
        }

        .logo {
            font-size: 18px;
            font-weight: 600;
            color: white;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
        }

        .nav-items {
            display: flex;
            gap: 30px;
        }

        .nav-item {
            color: rgba(255, 255, 255, 0.8);
            text-decoration: none;
            font-weight: 500;
            transition: all 0.3s ease;
            position: relative;
        }

        .nav-item:hover {
            color: white;
            text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
        }

        /* 主内容区 */
        .main-content {
            margin-top: 120px;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
        }

        /* 卡片样式 */
        .glass-card {
            padding: 40px;
            background: rgba(255, 255, 255, 0.06);
            backdrop-filter: blur(25px) saturate(180%);
            -webkit-backdrop-filter: blur(25px) saturate(180%);
            border: 1px solid rgba(255, 255, 255, 0.12);
            border-radius: 24px;
            position: relative;
            overflow: hidden;
            transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            cursor: pointer;
        }

        .glass-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 1px;
            background: linear-gradient(90deg, 
                transparent, 
                rgba(255, 255, 255, 0.4), 
                transparent
            );
        }

        .glass-card::after {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(255, 255, 255, 0.03) 0%, transparent 70%);
            opacity: 0;
            transition: opacity 0.3s ease;
            pointer-events: none;
        }

        .glass-card:hover::after {
            opacity: 1;
        }

        .glass-card:hover {
            background: rgba(255, 255, 255, 0.1);
            border-color: rgba(255, 255, 255, 0.2);
            transform: translateY(-8px) scale(1.02);
            box-shadow: 
                0 25px 50px rgba(0, 0, 0, 0.15),
                0 12px 25px rgba(0, 0, 0, 0.1),
                inset 0 1px 0 rgba(255, 255, 255, 0.25);
        }

        .card-title {
            font-size: 24px;
            font-weight: 700;
            color: white;
            margin-bottom: 15px;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
        }

        .card-description {
            color: rgba(255, 255, 255, 0.8);
            line-height: 1.6;
            font-size: 16px;
        }

        /* 浮动操作栏 */
        .floating-dock {
            position: fixed;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 15px;
            padding: 15px 25px;
            background: rgba(255, 255, 255, 0.08);
            backdrop-filter: blur(30px) saturate(200%);
            -webkit-backdrop-filter: blur(30px) saturate(200%);
            border: 1px solid rgba(255, 255, 255, 0.15);
            border-radius: 25px;
            box-shadow: 
                0 12px 32px rgba(0, 0, 0, 0.15),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
            z-index: 1000;
        }

        .dock-item {
            width: 50px;
            height: 50px;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }

        .dock-item::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(45deg, 
                rgba(255, 255, 255, 0.1), 
                rgba(255, 255, 255, 0.05)
            );
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .dock-item:hover {
            transform: translateY(-5px) scale(1.1);
            background: rgba(255, 255, 255, 0.15);
            box-shadow: 
                0 15px 30px rgba(0, 0, 0, 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 0.3);
        }

        .dock-item:hover::before {
            opacity: 1;
        }

        .dock-icon {
            width: 24px;
            height: 24px;
            background: white;
            border-radius: 4px;
            opacity: 0.8;
        }

        /* 大型特色卡片 */
        .hero-card {
            grid-column: 1 / -1;
            padding: 60px;
            text-align: center;
            background: rgba(255, 255, 255, 0.04);
            backdrop-filter: blur(30px) saturate(200%);
            -webkit-backdrop-filter: blur(30px) saturate(200%);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 30px;
            position: relative;
            overflow: hidden;
        }

        .hero-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 2px;
            background: linear-gradient(90deg, 
                transparent, 
                rgba(255, 255, 255, 0.5), 
                transparent
            );
        }

        .hero-title {
            font-size: 48px;
            font-weight: 800;
            color: white;
            margin-bottom: 20px;
            text-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
            background: linear-gradient(135deg, #fff 0%, rgba(255, 255, 255, 0.8) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .hero-subtitle {
            font-size: 20px;
            color: rgba(255, 255, 255, 0.8);
            line-height: 1.6;
            max-width: 600px;
            margin: 0 auto;
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .nav-bar {
                width: 95%;
                padding: 0 20px;
            }
            
            .nav-items {
                gap: 20px;
            }
            
            .glass-card {
                padding: 30px;
            }
            
            .hero-card {
                padding: 40px 30px;
            }
            
            .hero-title {
                font-size: 36px;
            }
        }

        /* 高级光影效果 */
        .glass-reflection {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 40%;
            background: linear-gradient(180deg, 
                rgba(255, 255, 255, 0.1) 0%, 
                rgba(255, 255, 255, 0.05) 50%,
                transparent 100%
            );
            pointer-events: none;
        }

        /* 鼠标跟踪高光 */
        .glass-card {
            --mouse-x: 50%;
            --mouse-y: 50%;
        }

        .glass-card::after {
            background: radial-gradient(circle at var(--mouse-x) var(--mouse-y), 
                rgba(255, 255, 255, 0.06) 0%, 
                transparent 50%
            );
        }
    </style>
</head>
<body>
    <div class="background-particles" id="particles"></div>
    
    <nav class="nav-bar liquid-glass">
        <div class="logo">iOS 26 Liquid Glass</div>
        <div class="nav-items">
            <a href="#" class="nav-item">Home</a>
            <a href="#" class="nav-item">Features</a>
            <a href="#" class="nav-item">About</a>
            <a href="#" class="nav-item">Contact</a>
        </div>
        <div class="glass-reflection"></div>
    </nav>

    <div class="container">
        <div class="main-content">
            <div class="hero-card glass-card">
                <h1 class="hero-title">Liquid Glass</h1>
                <p class="hero-subtitle">Experience the next generation of interface design with iOS 26's revolutionary Liquid Glass effect. Immersive, dynamic, and beautifully crafted.</p>
                <div class="glass-reflection"></div>
            </div>

            <div class="glass-card">
                <h3 class="card-title">半透明材质感</h3>
                <p class="card-description">采用毛玻璃式视觉特效，带有光影折射和模糊，增强界面的材质反馈感。真实模拟出玻璃般的折射感，边缘带有类似玻璃厚度的光影过渡。</p>
                <div class="glass-reflection"></div>
            </div>

            <div class="glass-card">
                <h3 class="card-title">动态高光反馈</h3>
                <p class="card-description">根据设备角度、环境光变化，界面随时改变反光形态，产生"真实物理"的漂浮视觉体验，让每一次交互都充满生命力。</p>
                <div class="glass-reflection"></div>
            </div>

            <div class="glass-card">
                <h3 class="card-title">空间漂浮感</h3>
                <p class="card-description">底栏、弹窗、菜单均浮于界面之上，强调信息层次和焦点引导。以轻盈方式浮现，不再有明确的边界。</p>
                <div class="glass-reflection"></div>
            </div>

            <div class="glass-card">
                <h3 class="card-title">智能自适应</h3>
                <p class="card-description">界面会根据内容和环境自动调整透明度和模糊程度，确保在任何情况下都能提供最佳的视觉体验和可读性。</p>
                <div class="glass-reflection"></div>
            </div>

            <div class="glass-card">
                <h3 class="card-title">流体动画</h3>
                <p class="card-description">每一个过渡都如液体般流畅自然，配合物理引擎打造的真实弹性反馈，让界面操作变得直观而愉悦。</p>
                <div class="glass-reflection"></div>
            </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';
                particle.style.left = Math.random() * 100 + '%';
                particle.style.top = Math.random() * 100 + '%';
                particle.style.animationDelay = Math.random() * 6 + 's';
                particle.style.animationDuration = (Math.random() * 4 + 4) + 's';
                particlesContainer.appendChild(particle);
            }
        }

        // 鼠标跟踪高光效果
        function handleMouseMove(e) {
            const cards = document.querySelectorAll('.glass-card');
            
            cards.forEach(card => {
                const rect = card.getBoundingClientRect();
                const x = ((e.clientX - rect.left) / rect.width) * 100;
                const y = ((e.clientY - rect.top) / rect.height) * 100;
                
                card.style.setProperty('--mouse-x', x + '%');
                card.style.setProperty('--mouse-y', y + '%');
            });
        }

        // 设备方向感应（模拟）
        function simulateDeviceOrientation() {
            const elements = document.querySelectorAll('.liquid-glass');
            let angle = 0;
            
            setInterval(() => {
                angle += 0.5;
                const intensity = Math.sin(angle * Math.PI / 180) * 0.1;
                
                elements.forEach(element => {
                    const currentTransform = element.style.transform || '';
                    element.style.transform = currentTransform + ` perspective(1000px) rotateX(${intensity}deg) rotateY(${intensity * 0.5}deg)`;
                });
            }, 100);
        }

        // 滚动视差效果
        function handleScroll() {
            const scrolled = window.pageYOffset;
            const parallaxElements = document.querySelectorAll('.glass-card');
            
            parallaxElements.forEach((element, index) => {
                const speed = 0.5 + (index * 0.1);
                const yPos = -(scrolled * speed);
                element.style.transform = `translateY(${yPos}px)`;
            });
        }

        // 动态背景渐变
        function animateBackground() {
            let hue = 0;
            
            setInterval(() => {
                hue = (hue + 0.5) % 360;
                document.body.style.background = `linear-gradient(135deg, 
                    hsl(${hue}, 60%, 60%) 0%, 
                    hsl(${(hue + 60) % 360}, 70%, 50%) 100%)`;
            }, 100);
        }

        // 玻璃反射动画
        function animateGlassReflections() {
            const reflections = document.querySelectorAll('.glass-reflection');
            
            reflections.forEach((reflection, index) => {
                reflection.style.animationDelay = (index * 0.2) + 's';
                reflection.style.animation = 'shimmer 4s ease-in-out infinite';
            });
        }

        // 触摸设备支持
        function handleTouch(e) {
            if (e.touches.length === 1) {
                const touch = e.touches[0];
                handleMouseMove({
                    clientX: touch.clientX,
                    clientY: touch.clientY
                });
            }
        }

        // 初始化
        document.addEventListener('DOMContentLoaded', () => {
            createParticles();
            animateGlassReflections();
            animateBackground();
            simulateDeviceOrientation();
            
            // 事件监听器
            document.addEventListener('mousemove', handleMouseMove);
            document.addEventListener('touchmove', handleTouch);
            window.addEventListener('scroll', handleScroll);
            
            // 预加载动画
            setTimeout(() => {
                document.body.style.opacity = '1';
            }, 100);
        });

        // 增强的悬停效果
        document.addEventListener('DOMContentLoaded', () => {
            const cards = document.querySelectorAll('.glass-card');
            
            cards.forEach(card => {
                card.addEventListener('mouseenter', () => {
                    card.style.filter = 'brightness(1.1) contrast(1.1)';
                });
                
                card.addEventListener('mouseleave', () => {
                    card.style.filter = 'brightness(1) contrast(1)';
                });
            });
        });
    </script>
</body>
</html>
```

Drag to resize

xAI

Grok 3 mini Reasoning (high)

```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;
            padding: 0;
            overflow: hidden;
            background: url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/4gxYSUNDX1BST0ZJTEUAAQEAAAxITGlubwIQAABtbnRyUkdCIFhZWiAHzgACAAkABgAxAABhY3NwTVNGVAAAAABJRUMgc1BSb2ZpbGUAAQEAAAxITU1lZGlhTmV0d29yawAwAABhY3NwAAA9AAAAB2YnVsdAAAfAAAABhnWFlaAAAxAAAABhY3ByAAA8AAAABRdbW5lAAA0AAAABRsdG1kAAA+AAAABRiVFJDAAA/AAAABRyWFlaAAA/AAAABRnWFlaAAA8AAAABRuVFJDAAA/AAAABRyVFJDAAA/AAAABRzWFlaAAA/AAAABgACGRsYXNzAAAAABRtZGF0AAA+AAAABBtZGF0AAA+AAAACBtZGF0AAADAAAACBtZGF0AAADAAAACBtZGF0AAA+AAAACBtZGF0AAA+AAAACBtZGF0AAA+AAAACBtZGF0AAA+AAAACBtZGF0AAA+AAAACBtZGF0AAA+AAAACBtZGF0AAA+AAAACBtZGF0AAA+AAAABgACGRsYXNzAAAAABRtZGF0AAA+AAAABBtZGF0AAA+AAAACBtZGF0AAADAAAACBtZGF0AAADAAAACBtZGF0AAA+AAAACBtZGF0AAA+AAAACBtZGF0AAA+AAAACBtZGF0AAA+AAAACBtZGF0AAA+AAAACBtZGF0AAA+AAAACBtZGF0AAA+AAAAEgAACGRzYnV0AAAAABAAAAFFjcHJ0AAABUAAAADNkZXNjAAABhAAAAGx3dHB0AAAB8AAAABRia3B0AAACBAAAABRyWFlaAAACGAAAABRnWFlaAAACLAAAABRiVFJDAAACLAAAABRyVFJDAAACLAAAABR1dXZdAAACLAAAABRleGFtcwAABLsAAAABRia3B0AAACBAAAABRyWFlaAAACLAAAABRnWFlaAAACLAAAABRiVFJDAAACLAAAABRyVFJDAAACLAAAABR2dWVkAAACLAAAABRtjHFN3AAACJAAAABBnZ1lWbAAACLAAAABBtjHRN3AAACJAAAABB1uaXVlAAACLAAAABRxvY2MAAACLAAAABRtleHAyAACL/wAATCwARwBYAAoACgAiAD8AIgBjADIAMAA0ACAAIwAxACUAJgAtAGMAOABuAHAAeQBtAHAAZgAxAHAAcgAzADQAMwAxADcAMgAzADEANQAzADgAMQAxADUAMQAzADMANQAzADgAMQAxADUAMAA5ACkAKgAsAC4AMAAuAC4AMgAxADIANgA0ADUANAA3ADgANgA0ADUANQA0ACkAMwAyADIANQA2ADQANAA0ACkANgAyADIANAA1ADcANgA1ACkAIgAyADMAMAA9AD4AMgAxADkAOAA5ADsAMwAyADMAXwAyADwANQAyADEAMwA6ADUANwA4ADcAMwA3ADkAMQA5ADAANgA1ADUANQA4ADUALgAyACYANQA6ADEANgA4ADkAOQA2ADQANgA3ADwAMwA0ADcANgA5ADgANQA3ADAANQA5ADcAMgAwADgAMQA0ADUANAA0ADYANQAxADcANwAxADgAMwA0ADUAMwA5ADgAOQAsAC4AMAAuAC4AMgA4ADCANQA4ADcANQA2ACkAKgAiADsAIgAzADQAMAA0ADcAMgA4ADIAMgAxADQANQA0ADAAMgAyADIANAA3ADAAMQA0ADcANAA3ADgAMgAxADIANgAyADMANgAyADkAMgA6ADYALgA0ADgAMQA1ACMAMQAyADkAOAA5ADsAMwAyADMAXwAyADwANQAyADEAMwA6ADUANwA4ADcAMwA3ADkAMQA5ADAANgA1ADUANQA4ADUALgAyACYANQA6ADEANgA4ADkAOQA2ADQANgA3ADwAMwA0ADcANgA5ADgANQA3ADAANQA5ADcAMgAwADgAMQA0ADUANAA0ADYANQAxADcANwAxADgAMwA0ADUAMwA5ADgAOQAsAC4AMAAuAC4AMgA4ADCANQA4ADcANQA2ACkAKgAiADsAIgBjADMAMAA9AD4AMgAxADkAOAA5ADsAMwAyADMAXwAyADwANQAyADEAMwA6ADUANwA4ADcAMwA3ADkAMQA5ADAANgA1ADUANQA4ADUALgAyACYANQA6ADEANgA4ADkAOQA2ADQANgA3ADwAMwA0ADcANgA5ADgANQA3ADAANQA5ADcAMgAwADgAMQA0ADUANAA0ADYANQAxADcANwAxADgAMwA0ADUAMwA5ADgAOQAsAC4AMAAuAC4AMgA4ADCANQA4ADcANQA2ACkAKgAiAD8AIgBjADMAMAA9AD4AMgAxADkAOAA5ADsAMwAyADMAXwAyADwANQAyADEAMwA6ADUANwA4ADcAMwA3ADkAMQA5ADAANgA1ADUANQA4ADUALgAyACYANQA6ADEANgA4ADkAOQA2ADQANgA3ADwAMwA0ADcANgA5ADgANQA3ADAANQA5ADcAMgAwADgAMQA0ADUANAA0ADYANQAxADcANwAxADgAMwA0ADUAMwA5ADgAOQAsAC4AMAAuAC4AMgA4ADCANQA4ADcANQA2ACkAKgAiADsAIgAzADQAMwAyADkAMwA6ADYAOQAsAC4AMAAuAC4AMgA4ADCANQA4ADcANQA2ACkAKgAiAD8AIgAzADQAMAA0ADcAMgA4ADIAMgAxADQANQA0//This is a placeholder base64 image for a blurred background. In a real scenario, replace with a full image URL or data URI.
        ') no-repeat center center fixed;
            background-size: cover;
        }

        .glass-container {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 80%;
            height: 80%;
            background: rgba(255, 255, 255, 0.3); /* Semi-transparent */
            backdrop-filter: blur(10px) brightness(1.2); /* Mimic frosted glass with blur and light enhancement */
            border-radius: 20px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.3), /* Basic shadow for depth */
                        0 0 50px rgba(255, 255, 255, 0.5) inset; /* Inner glow for refraction */
            transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transitions for floating effect */
            overflow: hidden;
        }

        .floating-element {
            position: absolute;
            background: rgba(255, 255, 255, 0.2);
            backdrop-filter: blur(8px);
            padding: 20px;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            transition: all 0.5s ease; /* For dynamic movements */
        }

        #app-window1 {
            top: 10%;
            left: 10%;
            width: 200px;
            height: 300px;
        }

        #app-window2 {
            top: 40%;
            right: 10%;
            width: 250px;
            height: 350px;
        }

        /* Dynamic highlight feedback */
        .glass-container:hover {
            transform: translate(-50%, -50%) scale(1.05); /* Slight scale for interaction */
            box-shadow: 0 0 30px rgba(255, 255, 255, 0.7), 0 0 60px rgba(0, 0, 0, 0.4) inset;
        }
    </style>
</head>
<body>
    <div class="glass-container">
        <!-- Simulate multi-task view with floating elements -->
        <div class="floating-element" id="app-window1">
            <h2>App 1</h2>
            <p>This is a simulated app window with liquid glass effect.</p>
        </div>
        <div class="floating-element" id="app-window2">
            <h2>App 2</h2>
            <p>Floating and interacting based on user movement.</p>
        </div>
    </div>

    <script>
        // JavaScript to add dynamic high light feedback based on mouse movement (simulating device angle and environment light)
        document.addEventListener('mousemove', function(e) {
            const glassContainer = document.querySelector('.glass-container');
            const floatingElements = document.querySelectorAll('.floating-element');
            
            // Calculate mouse position relative to viewport
            const mouseX = e.clientX / window.innerWidth; // 0 to 1
            const mouseY = e.clientY / window.innerHeight; // 0 to 1
            
            // Apply dynamic transform and shadow for floating and refraction effect
            floatingElements.forEach(el => {
                const offsetX = (mouseX - 0.5) * 20; // Scale movement
                const offsetY = (mouseY - 0.5) * 20;
                el.style.transform = `translate(${offsetX}px, ${offsetY}px) rotate(${offsetX * 0.1}deg)`; // Add subtle rotation for 3D feel
                el.style.boxShadow = `0 15px 40px rgba(0, 0, 0, 0.3), 0 0 ${10 + Math.abs(offsetX)}px rgba(255, 255, 255, 0.6) inset`; // Dynamic inner glow
            });
            
            // Adjust container for overall light refraction
            glassContainer.style.boxShadow = `0 0 25px rgba(0, 0, 0, 0.4), 0 0 ${15 + (mouseY * 10)}px rgba(255, 255, 255, 0.7) inset`;
        });
        
        // Optional: Simulate page scroll for floating elements (e.g., like Safari address bar)
        window.addEventListener('scroll', function() {
            const floatingElements = document.querySelectorAll('.floating-element');
            floatingElements.forEach(el => {
                el.style.opacity = window.scrollY > 100 ? 1 : 0.5; // Fade in on scroll
                el.style.transform += ` translateY(${window.scrollY * 0.1}px)`; // Light upward float
            });
        });
    </script>
</body>
</html>
```

Drag to resize

下面是一份纯前端实现的「Liquid Glass」示例代码，尽量还原 iOS 26 所展示的半透明玻璃、动态高光与空间漂浮感。直接保存为 .html 文件并在支持 backdrop-filter 的浏览器（Safari / Chromium 110+）中打开即可体验。 ```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 · iOS 26 Inspired</title> <style> /* 背景：深色多重渐变并缓慢移动，衬托玻璃折射 */ html,body{ height:100%;margin:0;overflow:hidden; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; color:#fff; } body{ background:linear-gradient(-45deg,#0f2027,#203a43,#2c5364); background-size:400% 400%; animation:bgMove 20s ease infinite alternate; } @keyframes bgMove{from{background-position:0% 50%}to{background-position:100% 50%}} /* 3D 容器，所有玻璃元素放在此空间中 */ .scene{ position:relative; width:100%;height:100%; display:flex;flex-direction:column; align-items:center;justify-content:center; gap:60px; perspective:1200px; } /* 核心：液态玻璃 */ .liquid-glass{ position:relative; width:clamp(240px,60vw,640px); min-height:180px; padding:40px; border-radius:28px; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.35); backdrop-filter:blur(24px) saturate(180%); -webkit-backdrop-filter:blur(24px) saturate(180%); box-shadow: 0 1px 2px rgba(255,255,255,.2) inset, /* 边缘高光 */ 0 60px 80px -40px rgba(0,0,0,.6); /* 悬浮阴影 */ transform-style:preserve-3d; transition:transform .2s cubic-bezier(.4,.2,.2,1); overflow:hidden; } /* 内层渐变，模拟玻璃厚度 */ .liquid-glass::before{ content:""; position:absolute;inset:0; border-radius:inherit; background:linear-gradient(135deg,rgba(255,255,255,.18) 0%,rgba(255,255,255,0) 100%); pointer-events:none; } /* 动态高光（位置实时改变） */ .liquid-glass::after{ content:""; position:absolute; top:var(--hl-y,50%); left:var(--hl-x,50%); width:320px;height:320px; transform:translate(-50%,-50%); border-radius:50%; background:radial-gradient(circle,rgba(255,255,255,.8) 0%,rgba(255,255,255,0) 60%); opacity:var(--hl-o,.3); filter:blur(32px); transition:opacity .15s linear; pointer-events:none; } /* 示例文排版 */ h1{margin:0 0 .4em;font-size:2rem;font-weight:600;} p{margin:0 0 1em;line-height:1.55;} /* 浮动底栏：随滚动出现/隐藏 */ .bottom-bar{ position:fixed; bottom:24px;left:50%; transform:translateX(-50%); width:clamp(260px,70vw,720px);height:56px; display:flex;align-items:center;justify-content:center;gap:32px; border-radius:20px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.25); backdrop-filter:blur(20px) saturate(180%); -webkit-backdrop-filter:blur(20px) saturate(180%); box-shadow:0 20px 40px -16px rgba(0,0,0,.6); transition:transform .3s cubic-bezier(.4,.2,.2,1); } .bottom-bar.hidden{transform:translate(-50%,120px)} .icon{ width:24px;height:24px; background:rgba(255,255,255,.8); border-radius:6px; } /* 用于演示滚动效果的超长内容层 */ .content-area{height:200vh;width:100%;position:absolute;top:0;left:0;} </style> </head> <body> <div class="content-area"></div> <div class="scene"> <div class="liquid-glass"> <h1>Liquid Glass</h1> <p>这是一块仿 iOS 26 的液态玻璃面板。拖动鼠标或倾斜设备即可看到光影随着角度流动，营造真实的玻璃折射与高光。</p> <p>利用 <code>backdrop-filter</code>、3D 透视与 <code>DeviceOrientation</code> / <code>mousemove</code> 事件实时更新光斑位置。</p> </div> <div class="liquid-glass" style="min-height:120px;padding:30px 40px;"> <p>多任务视图卡片示例：多块玻璃悬浮于同一 3D 空间中，通过阴影与动态高光强化层级。</p> </div> </div> <div class="bottom-bar" id="bottomBar"> <div class="icon"></div><div class="icon"></div><div class="icon"></div> </div> <script> /* 获取所有玻璃元素 */ const cards = document.querySelectorAll('.liquid-glass'); /* -------- 设备方向（移动端） -------- */ function handleOrientation(evt){ if(evt.beta === null) return; const x = evt.gamma; // [-90,90] Y 轴 const y = evt.beta; // [-180,180] X 轴 updateCards(x,y); } if(window.DeviceOrientationEvent){ if(typeof DeviceOrientationEvent.requestPermission==='function'){ /* iOS 13+ 需手势触发授权 */ window.addEventListener('click',()=>DeviceOrientationEvent.requestPermission() .then(state=>{if(state==='granted'){window.addEventListener('deviceorientation',handleOrientation);}}) .catch(console.error),{once:true}); }else{ window.addEventListener('deviceorientation',handleOrientation); } } /* -------- 鼠标（桌面端兜底） -------- */ window.addEventListener('mousemove',e=>{ const x = (e.clientX/window.innerWidth - .5)*180; // 模拟 gamma const y = (e.clientY/window.innerHeight - .5)*180; // 模拟 beta updateCards(x,y); }); /* 更新视觉：旋转 & 高光位置 */ function updateCards(gamma,beta){ cards.forEach(card=>{ const rotX = clamp(beta/-15,-8,8); // 正负 8° 内倾斜 const rotY = clamp(gamma/15,-8,8); card.style.transform = `rotateX(${rotX}deg) rotateY(${rotY}deg) translateZ(40px)`; const hlX = 50 - rotY*4; // 反向位移，制造折射 const hlY = 50 - rotX*4; card.style.setProperty('--hl-x',hlX+'%'); card.style.setProperty('--hl-y',hlY+'%'); const strength = Math.hypot(rotX,rotY)/8; card.style.setProperty('--hl-o',0.25+strength*0.4); }); } function clamp(v,min,max){return v<min?min:v>max?max:v;} /* -------- 底栏随滚动显示/隐藏 -------- */ const bottomBar=document.getElementById('bottomBar'); let lastScroll=0; window.addEventListener('scroll',()=>{ const y=window.scrollY; if(y>lastScroll){bottomBar.classList.add('hidden');} else{bottomBar.classList.remove('hidden');} lastScroll=y; }); </script> </body> </html> ``` 核心看点： 1. 玻璃材质：`backdrop-filter: blur(...) saturate(...)` + 半透明背景色，辅以内发光边缘与软阴影，呈现厚玻璃质感。 2. 动态高光：监听 `DeviceOrientationEvent`（或鼠标）更新 CSS 自定义变量，驱动伪元素径向渐变在面板表面滑动。 3. 空间漂浮：透视 + `translateZ` 与投影，配合滚动隐藏／显现的底栏，突出「浮在内容之上」的分层效果。可直接放到手机或桌面浏览器中体验，倾斜设备或移动鼠标，观察高光与卡片微倾随动。

好的，这是一个完全使用 HTML、CSS 和 JavaScript 实现的“液态玻璃 (Liquid Glass)”效果。它包含了您描述的所有核心特性：**半透明材质感**、**动态高光反馈**以及**空间漂浮感**。为了达到最佳效果，我加入了一个微妙的 3D 倾斜效果来响应鼠标移动，进一步增强了“真实物理”的交互体验。只需将下面的完整代码复制并保存为一个 `.html` 文件，然后在现代浏览器（如 Chrome, Edge, Safari, 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>液态玻璃效果演示</title>  <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" /> <style> /* --- 核心设计：全局样式与背景 --- */ :root { --card-width: 360px; --card-height: 500px; --card-border-radius: 28px; } body { font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; margin: 0; height: 100vh; overflow: hidden; background: #000; color: #fff; display: flex; justify-content: center; align-items: center; } /* 动态背景：创建几个流动的彩色光球，模仿环境光 */ .background-orb-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; filter: blur(100px); /* 关键：将光球模糊成大片色块 */ z-index: -1; } .orb { position: absolute; border-radius: 50%; mix-blend-mode: screen; /* 混合模式让颜色叠加更自然 */ animation: move linear infinite; } .orb1 { width: 400px; height: 400px; background-color: rgba(0, 122, 255, 0.6); /* 类似 iOS 的蓝色 */ top: 10%; left: 10%; animation-duration: 25s; } .orb2 { width: 500px; height: 500px; background-color: rgba(255, 45, 85, 0.6); /* 类似 iOS 的红色 */ bottom: 5%; right: 15%; animation-duration: 30s; animation-direction: reverse; } .orb3 { width: 350px; height: 350px; background-color: rgba(52, 199, 89, 0.6); /* 类似 iOS 的绿色 */ bottom: 30%; left: 25%; animation-duration: 20s; } @keyframes move { 0% { transform: translate(0, 0); } 25% { transform: translate(100px, -50px) scale(1.1); } 50% { transform: translate(-30px, 60px); } 75% { transform: translate(50px, -80px) scale(0.9); } 100% { transform: translate(0, 0); } } /* --- 核心设计：玻璃卡片 --- */ .glass-container { /* 设定3D透视空间，为卡片的倾斜做准备 */ perspective: 1200px; } .glass-card { width: var(--card-width); height: var(--card-height); position: relative; transform-style: preserve-3d; /* 开启3D空间 */ transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1); /* 平滑的倾斜回正动画 */ } /* 玻璃卡片的“材质”层 */ .glass-material { position: absolute; top: 0; left: 0; width: 100%; height: 100%; /* 1. 半透明材质感 (Translucent Material) */ background: rgba(255, 255, 255, 0.1); /* 基础的半透明白色 */ backdrop-filter: blur(40px) saturate(180%); /* 核心：毛玻璃模糊与饱和度提升 */ -webkit-backdrop-filter: blur(40px) saturate(180%); /* 兼容 Safari */ /* 3. 空间漂浮感 (Spatial Float) */ border-radius: var(--card-border-radius); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3); /* 制造悬浮感的柔和阴影 */ /* 模拟玻璃边缘的微光，增加厚度感 */ border: 1px solid rgba(255, 255, 255, 0.15); } /* 2. 动态高光反馈 (Dynamic Highlight) - 使用伪元素实现 */ .glass-material::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: inherit; /* 高光效果：一个径向渐变，位置由JS控制 */ background: radial-gradient( circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(255, 255, 255, 0.2), transparent 40% ); opacity: 0; /* 默认隐藏 */ transition: opacity 0.3s ease-out; /* 平滑显示/隐藏 */ pointer-events: none; /* 确保不影响鼠标事件 */ } /* 鼠标悬停时显示高光 */ .glass-card:hover .glass-material::before { opacity: 1; } /* --- 卡片内容 --- */ .card-content { position: relative; /* 必须在 material 之上 */ padding: 32px; box-sizing: border-box; height: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; transform: translateZ(50px); /* 让内容在Z轴上更靠前，有立体感 */ } .icon-container { width: 80px; height: 80px; background: rgba(255, 255, 255, 0.1); border-radius: 50%; display: flex; justify-content: center; align-items: center; margin-bottom: 24px; border: 1px solid rgba(255, 255, 255, 0.1); } .icon-container .material-symbols-outlined { font-size: 48px; color: rgba(255, 255, 255, 0.9); text-shadow: 0 1px 5px rgba(0,0,0,0.2); } h2 { font-size: 28px; font-weight: 500; margin: 0 0 12px 0; text-shadow: 0 1px 5px rgba(0,0,0,0.2); } p { font-size: 16px; font-weight: 300; line-height: 1.6; color: rgba(255, 255, 255, 0.8); margin: 0; flex-grow: 1; } /* --- 玻璃按钮 --- */ .button-group { display: flex; gap: 16px; margin-top: 24px; width: 100%; } .glass-button { flex: 1; padding: 14px 20px; font-size: 16px; font-weight: 400; font-family: inherit; color: rgba(255, 255, 255, 0.9); /* 按钮也采用玻璃材质，但效果更 subtle */ background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 16px; cursor: pointer; transition: all 0.2s ease; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); } .glass-button:hover { background: rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255, 0.3); } .glass-button.primary { background: rgba(0, 122, 255, 0.4); border-color: rgba(0, 122, 255, 0.5); } .glass-button.primary:hover { background: rgba(0, 122, 255, 0.6); border-color: rgba(0, 122, 255, 0.7); } </style> </head> <body>  <div class="background-orb-container"> <div class="orb orb1"></div> <div class="orb orb2"></div> <div class="orb orb3"></div> </div>  <div class="glass-container"> <div class="glass-card" id="glass-card">  <div class="glass-material"></div>  <div class="card-content"> <div class="icon-container"> <span class="material-symbols-outlined">airwave</span> </div> <h2>液态玻璃</h2> <p>一个仿照未来设计风格的液态玻璃效果演示。将光标悬停在卡片上，体验动态光影、材质反馈与空间交互。</p> <div class="button-group"> <button class="glass-button">了解更多</button> <button class="glass-button primary">立即体验</button> </div> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', () => { const card = document.getElementById('glass-card'); const material = card.querySelector('.glass-material'); if (!card) return; // --- 动态高光 & 3D倾斜 --- card.addEventListener('mousemove', (e) => { const rect = card.getBoundingClientRect(); // 1. 计算鼠标在卡片内的相对坐标 const mouseX = e.clientX - rect.left; const mouseY = e.clientY - rect.top; // 2. 更新高光伪元素的位置 material.style.setProperty('--mouse-x', `${mouseX}px`); material.style.setProperty('--mouse-y', `${mouseY}px`); // 3. 计算卡片倾斜角度 const centerX = rect.width / 2; const centerY = rect.height / 2; // 距离中心的偏移量 (-1 to 1) const rotateX = (mouseY - centerY) / centerY * -1; // Y轴移动影响X轴旋转 const rotateY = (mouseX - centerX) / centerX; // X轴移动影响Y轴旋转 const tiltStrength = 15; // 倾斜强度 card.style.transform = `rotateX(${rotateX * tiltStrength}deg) rotateY(${rotateY * tiltStrength}deg)`; }); // 鼠标离开时，平滑地将卡片恢复原状 card.addEventListener('mouseleave', () => { card.style.transform = 'rotateX(0deg) rotateY(0deg)'; }); }); </script> </body> </html> ```

```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>iOS 26 Liquid Glass Effect</title> <style> :root { --glass-bg: rgba(255, 255, 255, 0.1); --glass-blur: blur(20px); --highlight-intensity: 0.5; } body { margin: 0; height: 3000px; background: linear-gradient(45deg, #f3f9ff, #e6f0ff); overflow-x: hidden; } .liquid-glass { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); width: 80%; height: 60px; background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border-radius: 16px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.2); padding: 10px; transition: transform 0.3s ease; z-index: 100; } .glass-content { height: 100%; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; color: #333; font-family: -apple-system, BlinkMacSystemFont, sans-serif; } .glass-highlight { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 16px; background: linear-gradient( 135deg, rgba(255, 255, 255, var(--highlight-intensity)) 0%, rgba(255, 255, 255, 0) 50% ); pointer-events: none; transition: opacity 0.3s ease; } .floating-nav { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%); background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border-radius: 20px; padding: 15px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.2); z-index: 99; transition: transform 0.3s ease; } .scroll-container { margin-top: 200px; padding: 20px; } .scroll-content { height: 1000px; background: rgba(255, 255, 255, 0.5); border-radius: 20px; padding: 20px; } @supports not (backdrop-filter: blur(20px)) { .liquid-glass, .floating-nav { background: rgba(255, 255, 255, 0.8); } } </style> </head> <body> <div class="liquid-glass"> <div class="glass-content"> <span>←</span> <span>apple.com</span> <span>⋯</span> </div> <div class="glass-highlight"></div> </div> <div class="floating-nav"> <div class="glass-content"> <span>◀</span> <span>●</span> <span>▶</span> </div> </div> <div class="scroll-container"> <div class="scroll-content"> <h1>iOS 26 Liquid Glass Demo</h1> <p>Scroll to see floating effect</p> </div> </div> <script> // Dynamic highlight effect const glass = document.querySelector('.liquid-glass'); const highlight = document.querySelector('.glass-highlight'); document.addEventListener('mousemove', (e) => { const rect = glass.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; highlight.style.background = `linear-gradient( ${Math.atan2(y, x) * (180/Math.PI)}deg, rgba(255, 255, 255, var(--highlight-intensity)) 0%, rgba(255, 255, 255, 0) 50% )`; }); // Floating effect on scroll window.addEventListener('scroll', () => { const scrollY = window.scrollY; const nav = document.querySelector('.floating-nav'); if (scrollY > 100) { nav.style.transform = 'translateX(-50%) translateY(-20px)'; } else { nav.style.transform = 'translateX(-50%)'; } }); </script> </body> </html> ``` 这个实现包含以下核心特性： 1. **半透明材质感**： - 使用backdrop-filter实现毛玻璃效果 - 背景使用半透明rgba颜色 - 边缘使用1px模糊边框模拟玻璃厚度 2. **动态高光反馈**： - 通过JavaScript实时计算鼠标位置 - 动态生成渐变角度 - 高光强度使用CSS变量控制 3. **空间漂浮感**： - 底部导航栏使用transform实现浮动效果 - 阴影层次模拟Z轴空间 - 滚动时动态调整位置 4. **增强特性**： - 兼容不支持backdrop-filter的浏览器 - 动态过渡使用ease缓动函数 - 阴影使用多层叠加模拟真实光影可以通过以下方式进一步增强： 1. 添加更多动态过渡效果 2. 实现环境光感应（需要设备API） 3. 增加更多iOS交互细节（如点击涟漪效果） 4. 优化移动端触摸事件处理注意：实际效果受浏览器支持程度影响，建议在最新版Chrome/Firefox/Safari中查看完整效果。

```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 { 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-content { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; opacity: 0.8; } .floating-cards { display: flex; flex-direction: column; gap: 20px; padding: 40px 20px; max-width: 400px; margin: 0 auto; } .glass-card { position: relative; padding: 30px; border-radius: 24px; backdrop-filter: blur(20px) saturate(120%); -webkit-backdrop-filter: blur(20px) saturate(120%); background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.15); color: white; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); transform: translateY(0); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), inset 0 0 20px rgba(255, 255, 255, 0.05); cursor: pointer; } .glass-card:hover { transform: translateY(-5px); } .reflection-layer { position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 24px; overflow: hidden; pointer-events: none; } .liquid-highlight { position: absolute; width: 200%; height: 200%; top: -50%; left: -50%; background: linear-gradient( 45deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 20%, rgba(255, 255, 255, 0.1) 40%, rgba(255, 255, 255, 0) 60% ); transform: rotate(-30deg); animation: liquidFlow 8s infinite; opacity: 0.6; } @keyframes liquidFlow { 0% { transform: rotate(-30deg) translateX(0); } 100% { transform: rotate(-30deg) translateX(50%); } } .glow-effect { position: absolute; inset: 0; border-radius: 24px; box-shadow: 0 0 40px 20px rgba(255, 255, 255, 0.15), 0 0 80px 40px rgba(255, 255, 255, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.2); opacity: 0; transition: opacity 0.3s ease; } .glass-card:hover .glow-effect { opacity: 1; } .card-title { font-size: 24px; font-weight: 600; margin-bottom: 10px; letter-spacing: -0.5px; } .card-subtitle { font-size: 16px; opacity: 0.8; margin-bottom: 15px; } .icon-wrapper { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; background: rgba(255, 255, 255, 0.1); border-radius: 12px; margin-bottom: 20px; } .floating-navbar { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%); display: flex; gap: 20px; padding: 10px 15px; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(30px) saturate(150%); -webkit-backdrop-filter: blur(30px) saturate(150%); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 100px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); z-index: 1000; } .nav-item { padding: 12px 16px; border-radius: 50px; transition: all 0.3s ease; cursor: pointer; font-size: 14px; font-weight: 500; color: rgba(255, 255, 255, 0.8); text-decoration: none; } .nav-item:hover { background: rgba(255, 255, 255, 0.2); color: white; transform: scale(1.05); } .depth-shadow { position: absolute; inset: 0; border-radius: 24px; background: linear-gradient( to bottom right, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 50%, transparent 100% ); pointer-events: none; } .animated-background { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -2; opacity: 0.7; } .bubble { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, 0.1); animation: float 20s infinite; filter: blur(40px); } @keyframes float { 0%, 100% { transform: translateY(0) rotate(0deg); opacity: 1; } 25% { transform: translateY(-50px) rotate(90deg); } 50% { transform: translateY(-100px) rotate(180deg); opacity: 0.5; } 75% { transform: translateY(-50px) rotate(270deg); } } .content-layer { position: relative; z-index: 1; } .edge-reflection { position: absolute; inset: 0; border-radius: 24px; border: 1px solid transparent; background: linear-gradient( 180deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.1) 100% ) border-box; -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; } </style> </head> <body> <div class="animated-background"> <div class="bubble" style="width: 80px; height: 80px; top: 20%; left: 10%; animation-delay: 0s;"></div> <div class="bubble" style="width: 120px; height: 120px; top: 60%; right: 15%; animation-delay: 4s;"></div> <div class="bubble" style="width: 60px; height: 60px; bottom: 20%; left: 20%; animation-delay: 8s;"></div> <div class="bubble" style="width: 100px; height: 100px; top: 40%; right: 30%; animation-delay: 12s;"></div> <div class="bubble" style="width: 140px; height: 140px; bottom: 40%; left: 5%; animation-delay: 16s;"></div> </div> <div class="background-content"> <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center;"> <h1 style="font-size: 72px; font-weight: 700; color: rgba(255, 255, 255, 0.1); text-shadow: 0 0 20px rgba(255, 255, 255, 0.1);">iOS 26</h1> </div> </div> <div class="floating-cards"> <div class="glass-card"> <div class="reflection-layer"> <div class="liquid-highlight"></div> <div class="glow-effect"></div> <div class="depth-shadow"></div> </div> <div class="content-layer"> <div class="icon-wrapper"> <svg width="24" height="24" fill="white" viewBox="0 0 24 24"> <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/> </svg> </div> <div class="card-title">液态玻璃</div> <div class="card-subtitle">动态光影反馈</div> <p style="font-size: 14px; opacity: 0.7; line-height: 1.6;">iOS 26 的液玻璃效果模拟了真实物理世界的光影变化</p> </div> <div class="edge-reflection"></div> </div> <div class="glass-card"> <div class="reflection-layer"> <div class="liquid-highlight"></div> <div class="glow-effect"></div> <div class="depth-shadow"></div> </div> <div class="content-layer"> <div class="icon-wrapper"> <svg width="24" height="24" fill="white" viewBox="0 0 24 24"> <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/> </svg> </div> <div class="card-title">空间漂浮</div> <div class="card-subtitle">信息层级分离</div> <p style="font-size: 14px; opacity: 0.7; line-height: 1.6;">界面元素以浮动的玻璃形态呈现</p> </div> <div class="edge-reflection"></div> </div> <div class="glass-card"> <div class="reflection-layer"> <div class="liquid-highlight"></div> <div class="glow-effect"></div> <div class="depth-shadow"></div> </div> <div class="content-layer"> <div class="icon-wrapper"> <svg width="24" height="24" fill="white" viewBox="0 0 24 24"> <path d="M12 2l-5.5 9h11L12 2zm0 3.84L13.93 9h-3.87L12 5.84zM17.5 13c-2.49 0-4.5 2.01-4.5 4.5s2.01 4.5 4.5 4.5 4.5-2.01 4.5-4.5-2.01-4.5-4.5-4.5zM7.5 13C5.01 13 3 15.01 3 17.5S5.01 22 7.5 22 12 19.99 12 17.5 9.99 13 7.5 13z"/> </svg> </div> <div class="card-title">实时响应</div> <div class="card-subtitle">环境光适应</div> <p style="font-size: 14px; opacity: 0.7; line-height: 1.6;">根据设备角度和环境光动态调整</p> </div> <div class="edge-reflection"></div> </div> </div> <nav class="floating-navbar"> <a href="#" class="nav-item">首页</a> <a href="#" class="nav-item">搜索</a> <a href="#" class="nav-item">设置</a> <a href="#" class="nav-item">更多</a> </nav> <script> // 鼠标跟随高光效果 document.addEventListener('mousemove', (e) => { const cards = document.querySelectorAll('.glass-card'); cards.forEach(card => { const rect = card.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; const highlight = card.querySelector('.liquid-highlight'); if (highlight) { const percentX = (x / rect.width) * 100; const percentY = (y / rect.height) * 100; highlight.style.transform = `translate(-50%, -50%) rotate(${-30 + percentX}deg)`; highlight.style.opacity = 0.3 + (percentY / 100) * 0.3; } }); }); // 模拟环境光变化 let angle = 0; setInterval(() => { const body = document.body; const hue1 = (Math.sin(angle) * 30 + 240) % 360; const hue2 = (Math.sin(angle + 2) * 30 + 300) % 360; body.style.background = `linear-gradient(${120 + Math.sin(angle) * 60}deg, hsl(${hue1}, 70%, 50%) 0%, hsl(${hue2}, 70%, 60%) 100%)`; angle += 0.02; }, 100); // 滚动时的视差效果 window.addEventListener('scroll', () => { const scrollY = window.scrollY; const bubbles = document.querySelectorAll('.bubble'); bubbles.forEach((bubble, index) => { const speed = 0.5 + index * 0.1; bubble.style.transform = `translateY(${scrollY * speed}px)`; }); }); // 设备陀螺仪效果 if (window.DeviceOrientationEvent) { window.addEventListener('deviceorientation', (event) => { const beta = event.beta || 0; const gamma = event.gamma || 0; const highlightElements = document.querySelectorAll('.liquid-highlight'); highlightElements.forEach(highlight => { const newAngle = -30 + gamma * 0.5; highlight.style.transform = `translate(-50%, -50%) rotate(${newAngle}deg)`; highlight.style.opacity = 0.3 + beta * 0.005; }); }); } </script> </body> </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 Demo</title> <style> body { margin: 0; padding: 0; height: 100vh; overflow: hidden; background: url('https://source.unsplash.com/random/1920x1080/?abstract') no-repeat center center fixed; background-size: cover; display: flex; justify-content: center; align-items: center; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: white; } /* Glass container */ .glass-container { position: relative; width: 80%; max-width: 600px; height: 300px; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(20px) saturate(180%); border-radius: 20px; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); overflow: hidden; transform: perspective(1000px); transition: all 0.3s ease; } /* Inner content for floating feel */ .glass-content { padding: 20px; text-align: center; } .glass-content h1 { font-size: 24px; margin-bottom: 10px; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); } .glass-content p { font-size: 16px; opacity: 0.8; } /* Floating bottom bar */ .bottom-bar { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); width: 70%; height: 60px; background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(15px) saturate(200%); border-radius: 30px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15), inset 0 1px 2px rgba(255, 255, 255, 0.3); display: flex; justify-content: space-around; align-items: center; border: 1px solid rgba(255, 255, 255, 0.25); transition: all 0.2s ease; } .bottom-bar button { background: none; border: none; color: white; font-size: 14px; cursor: pointer; padding: 10px; opacity: 0.8; } /* Dynamic highlight */ .highlight { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 70%); opacity: 0; transition: all 0.1s ease; pointer-events: none; } /* Popup menu simulation */ .popup-menu { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.9); width: 300px; padding: 20px; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(25px) saturate(150%); border-radius: 15px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2), inset 0 2px 4px rgba(255, 255, 255, 0.2); border: 1px solid rgba(255, 255, 255, 0.3); text-align: center; opacity: 0; transition: all 0.3s ease; z-index: 10; } .popup-menu.active { opacity: 1; transform: translate(-50%, -50%) scale(1); } /* Simulate refraction edges */ .glass-container::before { content: ''; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; background: linear-gradient(135deg, rgba(255,255,255,0.2), rgba(255,255,255,0)); border-radius: 22px; z-index: -1; filter: blur(5px); } </style> </head> <body> <div class="glass-container"> <div class="highlight" id="highlight"></div> <div class="glass-content"> <h1>Liquid Glass Effect</h1> <p>Tilt your device to see dynamic highlights and refraction.</p> </div> <div class="bottom-bar"> <button onclick="togglePopup()">Menu</button> <button>Search</button> <button>Settings</button> </div> </div> <div class="popup-menu" id="popup"> <h2>Floating Menu</h2> <p>This menu floats with a glass-like depth and blur.</p> <button onclick="togglePopup()">Close</button> </div> <script> // Dynamic highlight based on device orientation if (window.DeviceOrientationEvent) { window.addEventListener('deviceorientation', function(event) { const gamma = event.gamma; // left-right tilt (-90 to 90) const beta = event.beta; // front-back tilt (-180 to 180) // Map tilt to highlight position and opacity const xPos = (gamma + 90) / 180 * 100; // 0 to 100% const yPos = (beta + 180) / 360 * 100; // 0 to 100% const opacity = Math.min(Math.abs(gamma) / 90 + Math.abs(beta) / 180, 1) * 0.5; const highlight = document.getElementById('highlight'); highlight.style.background = `radial-gradient(circle at ${xPos}% ${yPos}%, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 70%)`; highlight.style.opacity = opacity; // Slight 3D rotation for floating feel const container = document.querySelector('.glass-container'); container.style.transform = `perspective(1000px) rotateX(${beta / 4}deg) rotateY(${gamma / 4}deg)`; // Adjust bottom bar shadow for depth const bottomBar = document.querySelector('.bottom-bar'); bottomBar.style.boxShadow = `0 ${Math.abs(beta / 2)}px ${Math.abs(gamma / 2) + 20}px rgba(0, 0, 0, 0.15), inset 0 1px 2px rgba(255, 255, 255, 0.3)`; }); } // Toggle popup for floating menu demonstration function togglePopup() { const popup = document.getElementById('popup'); popup.classList.toggle('active'); } // Simulate environmental light change (random subtle animation) setInterval(() => { const highlight = document.getElementById('highlight'); const currentOpacity = parseFloat(highlight.style.opacity) || 0; highlight.style.opacity = Math.min(currentOpacity + (Math.random() - 0.5) * 0.1, 0.5); }, 1000); </script> </body> </html> ```

```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>iOS-26 Liquid Glass Demo</title> <style> /* 全局背景：渐变＋图像（可替换为任意壁纸） */ html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; background: linear-gradient(135deg, #667eea, #764ba2), url('https://source.unsplash.com/random/1920x1080') center/cover no-repeat; font-family: -apple-system, BlinkMacSystemFont, sans-serif; } /* 顶部悬浮栏 */ nav { position: fixed; top: 0; left: 0; width: 100%; height: 56px; padding: 0 20px; display: flex; align-items: center; color: #fff; font-size: 18px; background: rgba(255,255,255,0.1); border-bottom: 1px solid rgba(255,255,255,0.2); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); transform: translateY(-100%); opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; z-index: 100; } nav.visible { transform: translateY(0); opacity: 1; } /* 可滚动区域，模拟多任务视图背景 */ .wrapper { position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow-y: scroll; padding-top: 80px; box-sizing: border-box; } /* 卡片 / 弹窗 / 窗口 */ .card { width: 300px; height: 200px; margin: 40px auto; border-radius: 20px; background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.3); box-shadow: 0 8px 32px rgba(0,0,0,0.1); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); position: relative; overflow: hidden; } /* 动态高光层 */ .card::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient( circle at var(--x,50%) var(--y,50%), rgba(255,255,255,0.4) 0%, transparent 60% ); opacity: 0.4; transition: background-position 0.1s; pointer-events: none; } </style> </head> <body> <nav id="navbar">Liquid Glass Nav</nav> <div class="wrapper" id="wrapper"> <div class="card"></div> <div class="card"></div> <div class="card"></div> <div class="card"></div> <div class="card"></div> </div> <script> // 获取元素 const cards = document.querySelectorAll('.card'); const nav = document.getElementById('navbar'); const wrapper = document.getElementById('wrapper'); // 鼠标移动时调整高光中心 window.addEventListener('mousemove', e => { cards.forEach(card => { const r = card.getBoundingClientRect(); const x = ((e.clientX - r.left) / r.width) * 100; const y = ((e.clientY - r.top) / r.height)* 100; card.style.setProperty('--x', x + '%'); card.style.setProperty('--y', y + '%'); }); }); // 设备倾斜时也调整高光位置（移动端） window.addEventListener('deviceorientation', e => { const x = 50 + (e.gamma || 0) / 3; // 左右倾斜 const y = 50 + (e.beta || 0) / 3; // 前后倾斜 cards.forEach(card => { card.style.setProperty('--x', x + '%'); card.style.setProperty('--y', y + '%'); }); }); // 滚动时显示/隐藏顶部栏（模拟浮动层出现效果） wrapper.addEventListener('scroll', () => { if (wrapper.scrollTop > 60) nav.classList.add('visible'); else nav.classList.remove('visible'); }); </script> </body> </html> ```

# 苹果液态玻璃效果模拟实现我将为您创建一个高度模仿iOS 26液态玻璃效果的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>苹果液态玻璃效果 - iOS 26风格</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=SF+Pro+Display:wght@300;400;600&display=swap" rel="stylesheet"> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif; background: linear-gradient(135deg, #0a062f, #2a115a); color: rgba(255, 255, 255, 0.92); height: 100vh; display: flex; justify-content: center; align-items: center; perspective: 1000px; overflow: hidden; padding: 20px; } .scene { position: relative; width: 100%; max-width: 480px; height: 90vh; border-radius: 40px; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5); background-color: rgba(12, 11, 27, 0.5); transform-style: preserve-3d; overflow: hidden; padding: 50px 20px; } /* 主标题样式 */ .header { text-align: center; margin: 30px 0 50px; } h1 { font-weight: 600; font-size: 2.6rem; margin-bottom: 0.8rem; background: linear-gradient(90deg, #ffffff, #d2e9ff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 2px 10px rgba(125, 200, 255, 0.3); } .subtitle { font-size: 1.15rem; font-weight: 300; color: rgba(255, 255, 255, 0.75); max-width: 340px; margin: 0 auto; line-height: 1.5; } /* 液态玻璃浮层容器 */ .glass-panel { position: relative; width: 90%; min-height: 200px; margin: 30px auto; border-radius: 26px; display: flex; flex-direction: column; overflow: hidden; transform: translateZ(30px); transition: transform 0.4s ease; } .glass-panel.primary { height: 220px; background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(20px) saturate(200%); } .glass-panel.secondary { height: 140px; margin-top: 40px; background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(25px) saturate(200%); } .glass-panel::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 26px; box-shadow: inset 0 0 15px rgba(255, 255, 255, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 1px 0 0 rgba(255, 255, 255, 0.1), inset -1px 0 0 rgba(255, 255, 255, 0.1), inset 0 -1px 0 rgba(255, 255, 255, 0.1); pointer-events: none; z-index: 2; } /* 边缘厚度发光效果 */ .glass-edge { position: absolute; width: 100%; height: 100%; border-radius: 26px; z-index: 1; opacity: 0.15; box-shadow: 0 0 40px rgba(98, 147, 255, 0.7), 0 0 80px rgba(70, 114, 255, 0.45), 0 0 120px rgba(70, 114, 255, 0.25); } /* 动态高光层 */ .glass-highlight { position: absolute; width: 100%; height: 100%; border-radius: 26px; background: radial-gradient( 350px circle at var(--mouse-x) var(--mouse-y), rgba(255, 255, 255, 0.18), transparent 50% ); z-index: 3; pointer-events: none; transition: background 0.1s; } /* 内容样式 */ .content { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 30px 25px; position: relative; z-index: 4; } .glass-icon { width: 62px; height: 62px; border-radius: 16px; background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05)); backdrop-filter: blur(10px); display: flex; align-items: center; justify-content: center; margin-bottom: 20px; } .glass-icon svg { width: 32px; height: 32px; opacity: 0.9; } .glass-title { font-size: 1.5rem; font-weight: 600; margin-bottom: 12px; letter-spacing: 0.2px; } .glass-subtitle { font-size: 1.05rem; font-weight: 300; text-align: center; line-height: 1.6; opacity: 0.8; max-width: 300px; } /* 底部应用栏 */ .app-bar { position: absolute; bottom: 30px; left: 20px; right: 20px; height: 80px; border-radius: 24px; background: rgba(255, 255, 255, 0.07); backdrop-filter: blur(25px) saturate(180%); padding: 0 20px; display: flex; justify-content: space-around; align-items: center; z-index: 10; transform: translateZ(50px) scale(0.96); } .app-item { width: 54px; height: 54px; border-radius: 12px; display: flex; align-items: center; justify-content: center; transition: all 0.3s cubic-bezier(0.17, 0.67, 0.35, 1.2); } .app-item svg { width: 28px; height: 28px; opacity: 0.8; } .app-item:hover { background: rgba(255, 255, 255, 0.15); transform: translateY(-8px); cursor: pointer; } /* 浮动装饰元素 */ .floating-element { position: absolute; width: 180px; height: 180px; border-radius: 50%; opacity: 0.06; filter: blur(40px); z-index: -1; } .floating-element:nth-child(1) { top: 10%; left: 10%; background: linear-gradient(45deg, #fc00ff, #00dbde); animation: float 16s infinite ease; } .floating-element:nth-child(2) { bottom: 20%; right: 10%; background: linear-gradient(45deg, #3a8bff, #45caff); animation: float 14s 4s infinite ease; } /* 响应式样式 */ .responsive-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; width: 100%; margin: 15px 0; } .grid-item { width: 64px; height: 64px; border-radius: 18px; background: rgba(255, 255, 255, 0.07); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; transition: transform 0.3s ease, background 0.3s ease; } .grid-item:hover { background: rgba(255, 255, 255, 0.15); transform: translateY(-4px); } .grid-item svg { width: 30px; height: 30px; opacity: 0.8; } .app-badge { padding: 8px 18px; border-radius: 50px; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); margin-top: 20px; font-size: 0.95rem; font-weight: 500; letter-spacing: 0.3px; transition: all 0.3s ease; } .app-badge:hover { background: rgba(255, 255, 255, 0.15); transform: translateY(-2px); } /* 动画效果 */ @keyframes float { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(20px, -20px); } 50% { transform: translate(-15px, 25px); } 75% { transform: translate(30px, 15px); } } /* 媒体查询适配 */ @media (max-width: 500px) { .scene { border-radius: 30px; height: 85vh; } h1 { font-size: 2.2rem; } } </style> </head> <body> <div class="scene"> <div class="floating-element"></div> <div class="floating-element"></div> <div class="header"> <h1>液态玻璃效果</h1> <p class="subtitle">iOS 26 全新设计语言，结合光感折射与动态视觉效果</p> </div> <div class="glass-panel primary"> <div class="glass-edge"></div> <div class="glass-highlight" id="highlight1"></div> <div class="content"> <div class="glass-icon"> <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16Z" stroke="white" stroke-width="2"/> <path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="M6 3H8M16 3H18M3 6V8M3 16V18M8 21H6M18 21H16M21 16V18M21 6V8" stroke="white" stroke-width="1.5" stroke-linecap="round"/> </svg> </div> <h2 class="glass-title">动态高光效果</h2> <p class="glass-subtitle">跟随设备角度，产生真实的物理反光</p> </div> </div> <div class="responsive-grid"> <div class="grid-item"> <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 6.5C12.5523 6.5 13 6.94772 13 7.5V11H16.5C17.0523 11 17.5 11.4477 17.5 12C17.5 12.5523 17.0523 13 16.5 13H13V16.5C13 17.0523 12.5523 17.5 12 17.5C11.4477 17.5 11 17.0523 11 16.5V13H7.5C6.94772 13 6.5 12.5523 6.5 12C6.5 11.4477 6.94772 11 7.5 11H11V7.5C11 6.94772 11.4477 6.5 12 6.5Z" fill="white"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23ZM12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z" fill="white"/> </svg> </div> <div class="grid-item"> <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M9 11L12 14L19 7" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="M5 13L8 16" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="M15 7H18C19.1046 7 20 7.89543 20 9V18C20 19.1046 19.1046 20 18 20H6C4.89543 20 4 19.1046 4 18V9C4 7.89543 4.89543 7 6 7H10" stroke="white" stroke-width="1.5" stroke-linecap="round"/> <path d="M16 7V5C16 3.89543 15.1046 3 14 3H10C8.89543 3 8 3.89543 8 5V7" stroke="white" stroke-width="1.5" stroke-linecap="round"/> </svg> </div> <div class="grid-item"> <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M12.4974 4.25098C12.4974 3.69634 12.0521 3.25098 11.4974 3.25098C10.9428 3.25098 10.4974 3.69634 10.4974 4.25098V5.40476C7.03087 5.84199 4.49744 8.78878 4.49744 12.3412C4.49744 16.2183 7.50041 19.3412 11.2485 19.3412C15.1256 19.3412 18.2485 16.2183 18.2485 12.3412C18.2485 8.78878 15.7151 5.84199 12.2485 5.40476V9.75098C12.2485 10.3056 11.8031 10.751 11.2485 10.751C10.6939 10.751 10.2485 10.3056 10.2485 9.75098V5.63326C8.49481 6.22569 7.24854 7.88035 7.24854 9.84121V10.751H8.49854C9.05317 10.751 9.49854 11.1963 9.49854 11.751C9.49854 12.3056 9.05317 12.751 8.49854 12.751H6.74744H5.74744H4.49744C3.9428 12.751 3.49744 12.3056 3.49744 11.751C3.49744 11.1963 3.9428 10.751 4.49744 10.751H5.74854V9.84121C5.74854 7.11994 7.83374 4.82985 10.4974 4.4562V4.25098H10.4985H11.4985H12.4985H12.4974Z" fill="white"/> <circle cx="12" cy="12" r="9.5" stroke="white" stroke-width="1.5"/> </svg> </div> <div class="grid-item"> <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 7L12 17M7 12L17 12" stroke="white" stroke-width="1.5" stroke-linecap="round"/> <circle cx="12" cy="12" r="8.5" stroke="white" stroke-width="1.5"/> </svg> </div> </div> <div class="content"> <div class="app-badge">更多玻璃效果 · 轻点探索</div> </div> <div class="app-bar"> <div class="app-item"> <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M9.25 8.5H14.75" stroke="white" stroke-width="1.5" stroke-linecap="round"/> <path d="M9.25 12H14.75" stroke="white" stroke-width="1.5" stroke-linecap="round"/> <path d="M9.25 15.5H14.75" stroke="white" stroke-width="1.5" stroke-linecap="round"/> <path d="M5.5 4.75V19.25C5.5 20.6307 6.61929 21.75 8 21.75H16C17.3807 21.75 18.5 20.6307 18.5 19.25V4.75C18.5 3.36929 17.3807 2.25 16 2.25H8C6.61929 2.25 5.5 3.36929 5.5 4.75Z" stroke="white" stroke-width="1.5"/> </svg> </div> <div class="app-item"> <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M4 13.2799C4 10.5654 6.23827 8.3964 9.0242 8.49857C10.6221 8.55224 12.0858 9.36831 13.0362 10.6467L15.5 13.6235V4.5C15.5 3.94772 15.9477 3.5 16.5 3.5C17.0523 3.5 17.5 3.94771 17.5 4.5V13.6235L19.9638 10.6467C20.9142 9.36831 22.3779 8.55224 23.9758 8.49857C26.7617 8.3964 29 10.5654 29 13.2799C29 15.6882 27.2084 17.7487 24.8559 18.057C23.8115 15.4774 21.31 13.5 18.3999 13.5C16.2986 13.5 14.4308 14.5066 13.2506 16.071C12.0703 14.5066 10.2026 13.5 8.10125 13.5C5.19117 13.5 2.68968 15.4774 1.64538 18.057C-0.707299 17.7487 -2.5 15.6882 -2.5 13.2799C-2.5 10.5654 -0.261728 8.3964 2.5242 8.49857C4.12211 8.55224 5.5858 9.36831 6.5362 10.6467L9 13.6235V4.5C9 3.94772 9.44771 3.5 10 3.5C10.5523 3.5 11 3.94771 11 4.5L11 13.6235L13.4638 10.6467C14.4142 9.36831 15.8779 8.55224 17.4758 8.49857C20.2617 8.3964 22.5 10.5654 22.5 13.2799C22.5 15.4079 21.1487 17.2158 19.2499 17.6792C18.8951 15.6532 17.3 14.0901 15.3175 13.8087C14.312 16.7389 11.688 16.7389 10.6825 13.8087C8.69998 14.0901 7.10491 15.6532 6.75015 17.6792C4.85131 17.2158 3.5 15.4079 3.5 13.2799Z" fill="white"/> </svg> </div> <div class="app-item"> <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M13 7H8C6.89543 7 6 7.89543 6 9V16C6 17.1046 6.89543 18 8 18H16C17.1046 18 18 17.1046 18 16V11" stroke="white" stroke-width="1.5" stroke-linecap="round"/> <path d="M11 12L18 5M18 5H14.5M18 5V8.5" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> <div class="app-item"> <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M8.99814 9.21409C9.0168 8.18159 9.86779 7.34271 10.9003 7.32405C11.9328 7.30538 12.7717 8.15637 12.7904 9.18887" stroke="white" stroke-width="1.5"/> <path d="M3.5 5.00146H17.5C19.6609 5.00146 21.5 6.36494 21.5 8.13977V12.7197C21.5 14.4945 19.6609 15.8579 17.5 15.8579H14.3838C14.0972 15.8579 13.8251 15.978 13.6327 16.1875L11.2875 18.759C10.7876 19.3092 10.0002 18.9513 10.0002 18.2126V15.8579H6.5C4.33907 15.8579 2.5 14.4945 2.5 12.7197V8.13977C2.5 6.36494 4.33907 5.00146 6.5 5.00146" stroke="white" stroke-width="1.5" stroke-linecap="round"/> </svg> </div> </div> </div> <script> // 动态高光效果实现 document.addEventListener('mousemove', (e) => { const highlight1 = document.getElementById('highlight1'); const rect = highlight1.getBoundingClientRect(); // 确保鼠标坐标在元素范围内 if (rect.width === 0 || rect.height === 0) return; const x = e.clientX - rect.left; const y = e.clientY - rect.top; highlight1.style.setProperty('--mouse-x', x + 'px'); highlight1.style.setProperty('--mouse-y', y + 'px'); // 附近元素的轻微浮动效果 const primaryPanel = document.querySelector('.glass-panel.primary'); if (primaryPanel) { const centerX = rect.left + rect.width / 2; const centerY = rect.top + rect.height / 2; const distX = (e.clientX - centerX) / rect.width; const distY = (e.clientY - centerY) / rect.height; const rotationY = distX * 4; // 轻微Y轴旋转 const rotationX = distY * -4; // 轻微X轴旋转 const translateY = distY * -8; // 沿Y轴轻微移动 primaryPanel.style.transform = ` rotateX(${rotationX}deg) rotateY(${rotationY}deg) translateY(${translateY}px) `; } }); // 设备陀螺仪检测（用于真实设备） if (window.DeviceOrientationEvent) { window.addEventListener('deviceorientation', (event) => { const gamma = event.gamma; // 左右倾斜（-90到90） const beta = event.beta; // 前后倾斜（-180到180） const highlight1 = document.getElementById('highlight1'); if (!highlight1) return; // 将陀螺仪角度转换为屏幕坐标（简化处理） const rect = highlight1.getBoundingClientRect(); // 将gamma值映射到X坐标（-30到30偏移量） const xOffset = (gamma + 90) / 180 * rect.width; const xPos = Math.max(20, Math.min(rect.width - 20, xOffset)); // 将beta值映射到Y坐标（-30到30偏移量） const yOffset = (beta + 180) / 360 * rect.height; const yPos = Math.max(20, Math.min(rect.height - 20, yOffset)); highlight1.style.setProperty('--mouse-x', xPos + 'px'); highlight1.style.setProperty('--mouse-y', yPos + 'px'); // 面板的3D位移 const primaryPanel = document.querySelector('.glass-panel.primary'); if (primaryPanel) { primaryPanel.style.transform = ` rotateX(${(beta - 90) * 0.1}deg) rotateY(${gamma * 0.2}deg) `; } }); } // 悬浮动画效果增强 const gridItems = document.querySelectorAll('.grid-item'); gridItems.forEach(item => { item.addEventListener('mouseenter', () => { // 随机旋转角度（小幅度） const rotation = (Math.random() * 10) - 5; // -5° 到 5° 的旋转 item.style.transform = `translateY(-6px) rotate(${rotation}deg) scale(1.08)`; }); item.addEventListener('mouseleave', () => { item.style.transform = ''; }); }); // 触摸设备兼容性 document.body.addEventListener('touchstart', (e) => { if (e.touches.length > 0) { const touch = e.touches[0]; const mouseMoveEvent = new MouseEvent('mousemove', { clientX: touch.clientX, clientY: touch.clientY, bubbles: true }); document.dispatchEvent(mouseMoveEvent); } }, {passive: true}); document.body.addEventListener('touchmove', (e) => { if (e.touches.length > 0) { const touch = e.touches[0]; const mouseMoveEvent = new MouseEvent('mousemove', { clientX: touch.clientX, clientY: touch.clientY, bubbles: true }); document.dispatchEvent(mouseMoveEvent); } }, {passive: true}); </script> </body> </html> ``` ## 设计特点这个实现准确捕捉了iOS 26液态玻璃效果的核心特性： 1. **半透明材质感** - 使用多层叠加的模糊效果`backdrop-filter: blur()`创造玻璃质感 - 内部半透明渐变与轮廓边缘发光效果模拟玻璃厚度感 - 复杂的多重阴影和描边模拟光折射效果 2. **动态高光反馈** - 鼠标/触摸移动时显示实时位置高光 - 支持设备陀螺仪（将在真实移动设备上自动激活） - 玻璃面板会随鼠标移动产生微妙的3D位移 3. **空间漂浮感** - 底部应用栏悬浮于界面之上 - 卡片元素具有柔和的Z轴位移效果 - 所有元素在悬停时有动画过渡效果 4. **细节元素** - 浮动透明气泡创造深度感 - 图标悬浮动画增强交互体验 - 精心设计的微阴影系统模拟光线衍射页面在真实移动设备上使用时（如iPhone），将自动启用陀螺仪控制的高光效果，无需用户额外操作。

```html <!DOCTYPE html> <html lang="en"> <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; width: 4px; height: 4px; background: rgba(255, 255, 255, 0.3); border-radius: 50%; animation: float 6s ease-in-out infinite; } @keyframes float { 0%, 100% { transform: translateY(0px) rotate(0deg); opacity: 0.3; } 50% { transform: translateY(-20px) rotate(180deg); opacity: 0.8; } } /* 液态玻璃容器基础样式 */ .liquid-glass { background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 20px; position: relative; overflow: hidden; transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .liquid-glass::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent ); transition: left 0.5s; animation: shimmer 3s infinite; } @keyframes shimmer { 0% { left: -100%; } 50% { left: 100%; } 100% { left: 100%; } } .liquid-glass:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.25); transform: translateY(-2px); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.2); } /* 主容器 */ .container { max-width: 1200px; margin: 0 auto; padding: 40px 20px; position: relative; } /* 顶部导航栏 */ .nav-bar { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); width: 90%; max-width: 1000px; height: 60px; z-index: 1000; display: flex; align-items: center; justify-content: space-between; padding: 0 30px; background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(30px) saturate(200%); -webkit-backdrop-filter: blur(30px) saturate(200%); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 30px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.15); } .nav-bar::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent ); } .logo { font-size: 18px; font-weight: 600; color: white; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } .nav-items { display: flex; gap: 30px; } .nav-item { color: rgba(255, 255, 255, 0.8); text-decoration: none; font-weight: 500; transition: all 0.3s ease; position: relative; } .nav-item:hover { color: white; text-shadow: 0 0 10px rgba(255, 255, 255, 0.5); } /* 主内容区 */ .main-content { margin-top: 120px; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; } /* 卡片样式 */ .glass-card { padding: 40px; background: rgba(255, 255, 255, 0.06); backdrop-filter: blur(25px) saturate(180%); -webkit-backdrop-filter: blur(25px) saturate(180%); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 24px; position: relative; overflow: hidden; transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); cursor: pointer; } .glass-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent ); } .glass-card::after { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(255, 255, 255, 0.03) 0%, transparent 70%); opacity: 0; transition: opacity 0.3s ease; pointer-events: none; } .glass-card:hover::after { opacity: 1; } .glass-card:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.2); transform: translateY(-8px) scale(1.02); box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15), 0 12px 25px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.25); } .card-title { font-size: 24px; font-weight: 700; color: white; margin-bottom: 15px; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); } .card-description { color: rgba(255, 255, 255, 0.8); line-height: 1.6; font-size: 16px; } /* 浮动操作栏 */ .floating-dock { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%); display: flex; gap: 15px; padding: 15px 25px; background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(30px) saturate(200%); -webkit-backdrop-filter: blur(30px) saturate(200%); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 25px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.2); z-index: 1000; } .dock-item { width: 50px; height: 50px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 15px; display: flex; align-items: center; justify-content: center; transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); cursor: pointer; position: relative; overflow: hidden; } .dock-item::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(45deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05) ); opacity: 0; transition: opacity 0.3s ease; } .dock-item:hover { transform: translateY(-5px) scale(1.1); background: rgba(255, 255, 255, 0.15); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.3); } .dock-item:hover::before { opacity: 1; } .dock-icon { width: 24px; height: 24px; background: white; border-radius: 4px; opacity: 0.8; } /* 大型特色卡片 */ .hero-card { grid-column: 1 / -1; padding: 60px; text-align: center; background: rgba(255, 255, 255, 0.04); backdrop-filter: blur(30px) saturate(200%); -webkit-backdrop-filter: blur(30px) saturate(200%); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 30px; position: relative; overflow: hidden; } .hero-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent ); } .hero-title { font-size: 48px; font-weight: 800; color: white; margin-bottom: 20px; text-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); background: linear-gradient(135deg, #fff 0%, rgba(255, 255, 255, 0.8) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .hero-subtitle { font-size: 20px; color: rgba(255, 255, 255, 0.8); line-height: 1.6; max-width: 600px; margin: 0 auto; } /* 响应式设计 */ @media (max-width: 768px) { .nav-bar { width: 95%; padding: 0 20px; } .nav-items { gap: 20px; } .glass-card { padding: 30px; } .hero-card { padding: 40px 30px; } .hero-title { font-size: 36px; } } /* 高级光影效果 */ .glass-reflection { position: absolute; top: 0; left: 0; right: 0; height: 40%; background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 50%, transparent 100% ); pointer-events: none; } /* 鼠标跟踪高光 */ .glass-card { --mouse-x: 50%; --mouse-y: 50%; } .glass-card::after { background: radial-gradient(circle at var(--mouse-x) var(--mouse-y), rgba(255, 255, 255, 0.06) 0%, transparent 50% ); } </style> </head> <body> <div class="background-particles" id="particles"></div> <nav class="nav-bar liquid-glass"> <div class="logo">iOS 26 Liquid Glass</div> <div class="nav-items"> <a href="#" class="nav-item">Home</a> <a href="#" class="nav-item">Features</a> <a href="#" class="nav-item">About</a> <a href="#" class="nav-item">Contact</a> </div> <div class="glass-reflection"></div> </nav> <div class="container"> <div class="main-content"> <div class="hero-card glass-card"> <h1 class="hero-title">Liquid Glass</h1> <p class="hero-subtitle">Experience the next generation of interface design with iOS 26's revolutionary Liquid Glass effect. Immersive, dynamic, and beautifully crafted.</p> <div class="glass-reflection"></div> </div> <div class="glass-card"> <h3 class="card-title">半透明材质感</h3> <p class="card-description">采用毛玻璃式视觉特效，带有光影折射和模糊，增强界面的材质反馈感。真实模拟出玻璃般的折射感，边缘带有类似玻璃厚度的光影过渡。</p> <div class="glass-reflection"></div> </div> <div class="glass-card"> <h3 class="card-title">动态高光反馈</h3> <p class="card-description">根据设备角度、环境光变化，界面随时改变反光形态，产生"真实物理"的漂浮视觉体验，让每一次交互都充满生命力。</p> <div class="glass-reflection"></div> </div> <div class="glass-card"> <h3 class="card-title">空间漂浮感</h3> <p class="card-description">底栏、弹窗、菜单均浮于界面之上，强调信息层次和焦点引导。以轻盈方式浮现，不再有明确的边界。</p> <div class="glass-reflection"></div> </div> <div class="glass-card"> <h3 class="card-title">智能自适应</h3> <p class="card-description">界面会根据内容和环境自动调整透明度和模糊程度，确保在任何情况下都能提供最佳的视觉体验和可读性。</p> <div class="glass-reflection"></div> </div> <div class="glass-card"> <h3 class="card-title">流体动画</h3> <p class="card-description">每一个过渡都如液体般流畅自然，配合物理引擎打造的真实弹性反馈，让界面操作变得直观而愉悦。</p> <div class="glass-reflection"></div> </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'; particle.style.left = Math.random() * 100 + '%'; particle.style.top = Math.random() * 100 + '%'; particle.style.animationDelay = Math.random() * 6 + 's'; particle.style.animationDuration = (Math.random() * 4 + 4) + 's'; particlesContainer.appendChild(particle); } } // 鼠标跟踪高光效果 function handleMouseMove(e) { const cards = document.querySelectorAll('.glass-card'); cards.forEach(card => { const rect = card.getBoundingClientRect(); const x = ((e.clientX - rect.left) / rect.width) * 100; const y = ((e.clientY - rect.top) / rect.height) * 100; card.style.setProperty('--mouse-x', x + '%'); card.style.setProperty('--mouse-y', y + '%'); }); } // 设备方向感应（模拟） function simulateDeviceOrientation() { const elements = document.querySelectorAll('.liquid-glass'); let angle = 0; setInterval(() => { angle += 0.5; const intensity = Math.sin(angle * Math.PI / 180) * 0.1; elements.forEach(element => { const currentTransform = element.style.transform || ''; element.style.transform = currentTransform + ` perspective(1000px) rotateX(${intensity}deg) rotateY(${intensity * 0.5}deg)`; }); }, 100); } // 滚动视差效果 function handleScroll() { const scrolled = window.pageYOffset; const parallaxElements = document.querySelectorAll('.glass-card'); parallaxElements.forEach((element, index) => { const speed = 0.5 + (index * 0.1); const yPos = -(scrolled * speed); element.style.transform = `translateY(${yPos}px)`; }); } // 动态背景渐变 function animateBackground() { let hue = 0; setInterval(() => { hue = (hue + 0.5) % 360; document.body.style.background = `linear-gradient(135deg, hsl(${hue}, 60%, 60%) 0%, hsl(${(hue + 60) % 360}, 70%, 50%) 100%)`; }, 100); } // 玻璃反射动画 function animateGlassReflections() { const reflections = document.querySelectorAll('.glass-reflection'); reflections.forEach((reflection, index) => { reflection.style.animationDelay = (index * 0.2) + 's'; reflection.style.animation = 'shimmer 4s ease-in-out infinite'; }); } // 触摸设备支持 function handleTouch(e) { if (e.touches.length === 1) { const touch = e.touches[0]; handleMouseMove({ clientX: touch.clientX, clientY: touch.clientY }); } } // 初始化 document.addEventListener('DOMContentLoaded', () => { createParticles(); animateGlassReflections(); animateBackground(); simulateDeviceOrientation(); // 事件监听器 document.addEventListener('mousemove', handleMouseMove); document.addEventListener('touchmove', handleTouch); window.addEventListener('scroll', handleScroll); // 预加载动画 setTimeout(() => { document.body.style.opacity = '1'; }, 100); }); // 增强的悬停效果 document.addEventListener('DOMContentLoaded', () => { const cards = document.querySelectorAll('.glass-card'); cards.forEach(card => { card.addEventListener('mouseenter', () => { card.style.filter = 'brightness(1.1) contrast(1.1)'; }); card.addEventListener('mouseleave', () => { card.style.filter = 'brightness(1) contrast(1)'; }); }); }); </script> </body> </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> <style> body { margin: 0; padding: 0; overflow: hidden; background: url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/4gxYSUNDX1BST0ZJTEUAAQEAAAxITGlubwIQAABtbnRyUkdCIFhZWiAHzgACAAkABgAxAABhY3NwTVNGVAAAAABJRUMgc1BSb2ZpbGUAAQEAAAxITU1lZGlhTmV0d29yawAwAABhY3NwAAA9AAAAB2YnVsdAAAfAAAABhnWFlaAAAxAAAABhY3ByAAA8AAAABRdbW5lAAA0AAAABRsdG1kAAA+AAAABRiVFJDAAA/AAAABRyWFlaAAA/AAAABRnWFlaAAA8AAAABRuVFJDAAA/AAAABRyVFJDAAA/AAAABRzWFlaAAA/AAAABgACGRsYXNzAAAAABRtZGF0AAA+AAAABBtZGF0AAA+AAAACBtZGF0AAADAAAACBtZGF0AAADAAAACBtZGF0AAA+AAAACBtZGF0AAA+AAAACBtZGF0AAA+AAAACBtZGF0AAA+AAAACBtZGF0AAA+AAAACBtZGF0AAA+AAAACBtZGF0AAA+AAAACBtZGF0AAA+AAAABgACGRsYXNzAAAAABRtZGF0AAA+AAAABBtZGF0AAA+AAAACBtZGF0AAADAAAACBtZGF0AAADAAAACBtZGF0AAA+AAAACBtZGF0AAA+AAAACBtZGF0AAA+AAAACBtZGF0AAA+AAAACBtZGF0AAA+AAAACBtZGF0AAA+AAAACBtZGF0AAA+AAAAEgAACGRzYnV0AAAAABAAAAFFjcHJ0AAABUAAAADNkZXNjAAABhAAAAGx3dHB0AAAB8AAAABRia3B0AAACBAAAABRyWFlaAAACGAAAABRnWFlaAAACLAAAABRiVFJDAAACLAAAABRyVFJDAAACLAAAABR1dXZdAAACLAAAABRleGFtcwAABLsAAAABRia3B0AAACBAAAABRyWFlaAAACLAAAABRnWFlaAAACLAAAABRiVFJDAAACLAAAABRyVFJDAAACLAAAABR2dWVkAAACLAAAABRtjHFN3AAACJAAAABBnZ1lWbAAACLAAAABBtjHRN3AAACJAAAABB1uaXVlAAACLAAAABRxvY2MAAACLAAAABRtleHAyAACL/wAATCwARwBYAAoACgAiAD8AIgBjADIAMAA0ACAAIwAxACUAJgAtAGMAOABuAHAAeQBtAHAAZgAxAHAAcgAzADQAMwAxADcAMgAzADEANQAzADgAMQAxADUAMQAzADMANQAzADgAMQAxADUAMAA5ACkAKgAsAC4AMAAuAC4AMgAxADIANgA0ADUANAA3ADgANgA0ADUANQA0ACkAMwAyADIANQA2ADQANAA0ACkANgAyADIANAA1ADcANgA1ACkAIgAyADMAMAA9AD4AMgAxADkAOAA5ADsAMwAyADMAXwAyADwANQAyADEAMwA6ADUANwA4ADcAMwA3ADkAMQA5ADAANgA1ADUANQA4ADUALgAyACYANQA6ADEANgA4ADkAOQA2ADQANgA3ADwAMwA0ADcANgA5ADgANQA3ADAANQA5ADcAMgAwADgAMQA0ADUANAA0ADYANQAxADcANwAxADgAMwA0ADUAMwA5ADgAOQAsAC4AMAAuAC4AMgA4ADCANQA4ADcANQA2ACkAKgAiADsAIgAzADQAMAA0ADcAMgA4ADIAMgAxADQANQA0ADAAMgAyADIANAA3ADAAMQA0ADcANAA3ADgAMgAxADIANgAyADMANgAyADkAMgA6ADYALgA0ADgAMQA1ACMAMQAyADkAOAA5ADsAMwAyADMAXwAyADwANQAyADEAMwA6ADUANwA4ADcAMwA3ADkAMQA5ADAANgA1ADUANQA4ADUALgAyACYANQA6ADEANgA4ADkAOQA2ADQANgA3ADwAMwA0ADcANgA5ADgANQA3ADAANQA5ADcAMgAwADgAMQA0ADUANAA0ADYANQAxADcANwAxADgAMwA0ADUAMwA5ADgAOQAsAC4AMAAuAC4AMgA4ADCANQA4ADcANQA2ACkAKgAiADsAIgBjADMAMAA9AD4AMgAxADkAOAA5ADsAMwAyADMAXwAyADwANQAyADEAMwA6ADUANwA4ADcAMwA3ADkAMQA5ADAANgA1ADUANQA4ADUALgAyACYANQA6ADEANgA4ADkAOQA2ADQANgA3ADwAMwA0ADcANgA5ADgANQA3ADAANQA5ADcAMgAwADgAMQA0ADUANAA0ADYANQAxADcANwAxADgAMwA0ADUAMwA5ADgAOQAsAC4AMAAuAC4AMgA4ADCANQA4ADcANQA2ACkAKgAiAD8AIgBjADMAMAA9AD4AMgAxADkAOAA5ADsAMwAyADMAXwAyADwANQAyADEAMwA6ADUANwA4ADcAMwA3ADkAMQA5ADAANgA1ADUANQA4ADUALgAyACYANQA6ADEANgA4ADkAOQA2ADQANgA3ADwAMwA0ADcANgA5ADgANQA3ADAANQA5ADcAMgAwADgAMQA0ADUANAA0ADYANQAxADcANwAxADgAMwA0ADUAMwA5ADgAOQAsAC4AMAAuAC4AMgA4ADCANQA4ADcANQA2ACkAKgAiADsAIgAzADQAMwAyADkAMwA6ADYAOQAsAC4AMAAuAC4AMgA4ADCANQA4ADcANQA2ACkAKgAiAD8AIgAzADQAMAA0ADcAMgA4ADIAMgAxADQANQA0//This is a placeholder base64 image for a blurred background. In a real scenario, replace with a full image URL or data URI. ') no-repeat center center fixed; background-size: cover; } .glass-container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; height: 80%; background: rgba(255, 255, 255, 0.3); /* Semi-transparent */ backdrop-filter: blur(10px) brightness(1.2); /* Mimic frosted glass with blur and light enhancement */ border-radius: 20px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.3), /* Basic shadow for depth */ 0 0 50px rgba(255, 255, 255, 0.5) inset; /* Inner glow for refraction */ transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transitions for floating effect */ overflow: hidden; } .floating-element { position: absolute; background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(8px); padding: 20px; border-radius: 15px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); transition: all 0.5s ease; /* For dynamic movements */ } #app-window1 { top: 10%; left: 10%; width: 200px; height: 300px; } #app-window2 { top: 40%; right: 10%; width: 250px; height: 350px; } /* Dynamic highlight feedback */ .glass-container:hover { transform: translate(-50%, -50%) scale(1.05); /* Slight scale for interaction */ box-shadow: 0 0 30px rgba(255, 255, 255, 0.7), 0 0 60px rgba(0, 0, 0, 0.4) inset; } </style> </head> <body> <div class="glass-container">  <div class="floating-element" id="app-window1"> <h2>App 1</h2> <p>This is a simulated app window with liquid glass effect.</p> </div> <div class="floating-element" id="app-window2"> <h2>App 2</h2> <p>Floating and interacting based on user movement.</p> </div> </div> <script> // JavaScript to add dynamic high light feedback based on mouse movement (simulating device angle and environment light) document.addEventListener('mousemove', function(e) { const glassContainer = document.querySelector('.glass-container'); const floatingElements = document.querySelectorAll('.floating-element'); // Calculate mouse position relative to viewport const mouseX = e.clientX / window.innerWidth; // 0 to 1 const mouseY = e.clientY / window.innerHeight; // 0 to 1 // Apply dynamic transform and shadow for floating and refraction effect floatingElements.forEach(el => { const offsetX = (mouseX - 0.5) * 20; // Scale movement const offsetY = (mouseY - 0.5) * 20; el.style.transform = `translate(${offsetX}px, ${offsetY}px) rotate(${offsetX * 0.1}deg)`; // Add subtle rotation for 3D feel el.style.boxShadow = `0 15px 40px rgba(0, 0, 0, 0.3), 0 0 ${10 + Math.abs(offsetX)}px rgba(255, 255, 255, 0.6) inset`; // Dynamic inner glow }); // Adjust container for overall light refraction glassContainer.style.boxShadow = `0 0 25px rgba(0, 0, 0, 0.4), 0 0 ${15 + (mouseY * 10)}px rgba(255, 255, 255, 0.7) inset`; }); // Optional: Simulate page scroll for floating elements (e.g., like Safari address bar) window.addEventListener('scroll', function() { const floatingElements = document.querySelectorAll('.floating-element'); floatingElements.forEach(el => { el.style.opacity = window.scrollY > 100 ? 1 : 0.5; // Fade in on scroll el.style.transform += ` translateY(${window.scrollY * 0.1}px)`; // Light upward float }); }); </script> </body> </html> ```