如何通过 Web 技术实现惊艳的 “macOS 26 液态玻璃” 效果教程

本教程旨在深度解析并从零开始，教你如何使用前端技术栈，完美复刻出备受瞩目的“液态玻璃”（Liquid Glassmorphism）UI 效果。我们将从核心概念讲起，分步进行编码实现。

Part 1: 核心理念与必备元素!

“液态玻璃”效果是玻璃拟态（Glassmorphism）的升级版。它不仅有磨砂质感，更强调光影的流动性和层次感。要实现它，我们需要关注以下几个关键点：

多彩的动态背景：一个静态或单调的背景无法凸显玻璃的通透感。我们需要一个色彩丰富、最好带有缓慢动画的背景，当玻璃悬浮于其上时，模糊效果和光影变化才会显得生动。
磨砂玻璃底层 (The Frosted Glass Base)：这是效果的核心。利用 CSS 的 backdrop-filter: blur() 属性，使元素可以模糊其下方的任何内容。
微妙的轮廓光 (Subtle Contour Lighting)：为了模拟真实玻璃的边缘反光，我们需要一个极细的、半透明的边框。这能让玻璃元素从背景中“浮”出来。
模拟光源与高光 (Simulated Light Source & Sheen)：这是“液态”感的来源。我们将用 JavaScript 实时追踪鼠标位置，并通过 CSS 径向渐变（radial-gradient）在玻璃上创造一个跟随鼠标移动的柔和光斑。
立体感与深度 (3D Feel & Depth)：通过柔和的阴影（box-shadow）来模拟玻璃与背景之间的距离，增强整体的立体感和空间层次。

Part 2: 基础结构搭建 (HTML)

首先，我们需要一个简单的 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>液态玻璃效果教程</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="background-orb orb1"></div>
    <div class="background-orb orb2"></div>

    <div class="glass-card" id="card">
        <div class="card-content">

<h1>Liquid Glass</h1>

<p>An advanced UI style combining blur, transparency, and dynamic lighting.</p>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>

我们创建了两个 div.background-orb 用于制作动态背景。
div.glass-card 是我们的主角，所有效果将应用在它上面。
我们将会把 CSS 和 JavaScript 分离到 style.css 和 script.js 文件中，方便管理。

Part 3: 核心样式实现 (CSS)

这是实现视觉效果最关键的部分。在 style.css 文件中，我们将分步添加样式。

Step 3.1: 准备舞台 - 页面和背景

CSS

/* style.css */

body {
    margin: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: sans-serif;
    /* 一个充满活力的渐变背景 */
    background: linear-gradient(45deg, #2a2a72 0%, #009ffd 100%);
    overflow: hidden; /* 隐藏溢出视口的背景球 */
    position: relative;
}

.background-orb {
    position: absolute;
    border-radius: 50%;
    /* 强模糊是制造柔和背景的关键 */
    filter: blur(100px); 
}

.orb1 {
    width: 350px;
    height: 350px;
    background-color: rgba(255, 0, 255, 0.6);
    top: 5%;
    left: 10%;
    animation: moveOrb 15s infinite alternate;
}

.orb2 {
    width: 400px;
    height: 400px;
    background-color: rgba(0, 255, 255, 0.5);
    bottom: 10%;
    right: 15%;
    animation: moveOrb 20s infinite alternate-reverse;
}

/* 定义一个简单的位移动画 */
@keyframes moveOrb {
    from { transform: translate(0, 0); }
    to { transform: translate(80px, -100px); }
}

Step 3.2: 塑造玻璃 - 卡片基础样式

现在来定义 .glass-card 的基础外观。

CSS

/* 接上文 style.css */

.glass-card {
    width: 340px;
    height: 480px;
    position: relative; /* 用于光斑伪元素的定位 */
    overflow: hidden;  /* 隐藏溢出卡片的光斑 */

    /* --- 玻璃质感三要素 --- */

    /* 1. 半透明背景色 */
    background: rgba(255, 255, 255, 0.1);

    /* 2. 边框模拟轮廓光 */
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 24px;

    /* 3. 阴影增加立体感 */
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.25);

    padding: 30px;
    box-sizing: border-box;
    color: white;
    text-shadow: 0 1px 4px rgba(0,0,0,0.2);
}

Step 3.3: 见证奇迹 - 背景模糊

这是最神奇的一步，只需一行代码。

CSS

/* 接上文 style.css */

.glass-card {
    /* ...之前的样式... */

    /* 核心属性：背景滤镜-模糊 */
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px); /* 兼容旧版 Safari */
}

Step 3.4: 注入灵魂 - 动态光泽

我们将使用 ::before 伪元素来创建光斑。它的位置将由 JS 通过 CSS 自定义属性（变量）来控制。

CSS

/* 接上文 style.css */

.glass-card::before {
    content: '';
    position: absolute;

    /* 使用 CSS 变量，等待 JS 传入值 */
    top: var(--mouse-y, 50%);
    left: var(--mouse-x, 50%);

    transform: translate(-50%, -50%); /* 让光斑中心点与鼠标位置重合 */
    width: 200px;
    height: 200px;

    /* 这就是光斑本身：一个半透明的径向渐变 */
    background: radial-gradient(circle, 
        rgba(255, 255, 255, 0.5) 0%, 
        rgba(255, 255, 255, 0) 70%
    );

    pointer-events: none; /* 让鼠标可以“穿透”光斑，与卡片内容交互 */
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

/* 当鼠标悬浮在卡片上时，显示光斑 */
.glass-card:hover::before {
    opacity: 1;
}

/* 卡片内容的样式 */
.card-content {
    position: relative; /* 确保内容在光斑之上 */
    z-index: 1;
}
.card-content h1 {
    font-size: 3rem;
    margin: 0;
}
.card-content p {
    font-size: 1.1rem;
    opacity: 0.8;
}

Part 4: 赋予生命 (JavaScript)

最后一步，我们用几行 JavaScript 代码来追踪鼠标位置，并将其传递给 CSS。在 script.js 文件中写入以下代码：

JavaScript

// script.js

// 1. 获取卡片元素
const card = document.getElementById('card');

// 2. 为整个文档添加鼠标移动事件监听器
document.addEventListener('mousemove', (e) => {
    // 3. 计算鼠标相对于卡片左上角的位置
    const rect = card.getBoundingClientRect();
    const x = e.clientX - rect.left; // 鼠标的X坐标 - 卡片左侧的X坐标
    const y = e.clientY - rect.top;  // 鼠标的Y坐标 - 卡片顶部的Y坐标

    // 4. 将计算出的位置，设置为卡片元素的 CSS 自定义属性
    card.style.setProperty('--mouse-x', `${x}px`);
    card.style.setProperty('--mouse-y', `${y}px`);
});