玻璃态 UI + 代码雨动画：赛博朋克风格界面实现

三月 28, 2026 / Mr.x / 5阅读 / 0评论/ 分类: 创意
玻璃态 UI + 代码雨动画 — 荣小站

玻璃态 UI + 代码雨动画：赛博朋克风格界面实现

2026-03-29阅读约 15 分钟难度：中等
CSS动画GlassmorphismMatrix赛博朋克

在现代 Web 设计中，视觉效果越来越受到重视。今天我们来学习两个非常炫酷的前端特效：玻璃态 UI（Glassmorphism） 和 代码雨动画（Matrix Rain）。前者是近年来流行的 UI 设计趋势，后者是经典的赛博朋克风格元素。

更有趣的是，将这两种效果结合在一起，可以创造出极具科技感的赛博朋克风格界面。本文包含完整可运行的代码，可以直接复制使用。

一、玻璃态 UI 效果详解

1.1 什么是 Glassmorphism？

Glassmorphism（玻璃拟态）是一种 UI 设计风格，核心特征是半透明模糊背景，就像透过磨砂玻璃看东西。这种设计风格在 2020 年开始流行，被广泛应用于 iOS、Windows 11 等系统界面。

核心特点：

  • 透明度：背景半透明，能透出下层内容
  • 模糊效果：使用 backdrop-filter 模糊背景
  • 细边框：半透明细边框增强玻璃质感
  • 阴影：柔和阴影增强层次感

1.2 效果演示

Live Demo — Glassmorphism Card

✨ 玻璃态卡片

透过磨砂玻璃看世界，朦胧中透着美感

1.3 核心 CSS 属性

属性作用推荐值
backdrop-filter模糊背景blur(10px ~ 20px)
background半透明背景rgba(255,255,255, 0.1~0.2)
border半透明边框1px solid rgba(255,255,255,0.2)
border-radius圆角12px ~ 24px
box-shadow阴影0 8px 32px rgba(0,0,0,0.2)
💡 关键点

backdrop-filter 必须配合透明背景使用，元素背后需要有内容才能看到模糊效果。Safari 需加 -webkit- 前缀。

1.4 玻璃态 UI 完整代码

HTML
/* 玻璃态卡片 HTML */
<div class="glass-container">
  <div class="glass-card">
    <h3>玻璃态卡片</h3>
    <p>透过磨砂玻璃看世界</p>
    <button class="glass-btn">点击体验</button>
  </div>
</div>
CSS
/* 渐变背景容器 */
.glass-container {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  min-height: 350px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 玻璃态卡片核心 */
.glass-card {
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 16px;
  padding: 30px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  width: 300px;
}

二、代码雨动画详解

2.1 什么是 Matrix Rain？

Matrix Rain（矩阵雨/代码雨）源自电影《黑客帝国》（The Matrix，1999）中经典的绿色字符从天而降画面，象征着"矩阵"这个虚拟世界的数据流，已成为赛博朋克和黑客文化的标志性视觉符号。

效果特点：

  • 垂直下落：字符从顶部向底部流动
  • 随机字符：日文片假名 + 数字组合
  • 绿色荧光：经典"黑客绿"配色
  • 发光效果：text-shadow 实现辉光
  • 速度差异：不同列下落速度各不相同

2.2 效果演示（真实运行中）

Live Demo — Matrix Rain Animation
✅ 以上代码雨动画是真实运行的

它使用 Canvas API 实现，每列字符、位置、速度都是随机生成的，流畅且高性能。

2.3 实现原理

  1. Canvas 绑定：创建 canvas 元素并设置尺寸
  2. 字符矩阵：定义日文片假名 + 数字字符集
  3. 列数组：跟踪每列的 Y 坐标位置
  4. 动画循环：requestAnimationFrame 实现 60fps 流畅动画
  5. 渐隐效果：半透明黑色覆盖实现拖尾效果

2.4 代码雨完整代码

HTML
<!-- 代码雨容器 -->
<div class="matrix-demo">
  <canvas id="matrixCanvas"></canvas>
</div>
JavaScript
// Matrix 字符集
const chars = 'アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン0123456789';

const canvas = document.getElementById('matrixCanvas');
const ctx = canvas.getContext('2d');

// 设置 canvas 尺寸
canvas.width = canvas.parentElement.offsetWidth;
canvas.height = canvas.parentElement.offsetHeight;

const fontSize = 15;
const columns = Math.floor(canvas.width / fontSize);
const drops = Array(columns).fill(1);

function draw() {
  // 半透明黑色覆盖实现拖尾效果
  ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  
  ctx.fillStyle = '#0f0';
  ctx.font = fontSize + 'px monospace';
  
  for (let i = 0; i < drops.length; i++) {
    const text = chars[Math.floor(Math.random() * chars.length)];
    ctx.fillText(text, i * fontSize, drops[i] * fontSize);
    
    if (drops[i] * fontSize > canvas.height && Math.random() > 0.975) {
      drops[i] = 0;
    }
    drops[i]++;
  }
}

// 启动动画
setInterval(draw, 33);

三、赛博朋克组合效果

3.1 设计思路

将玻璃态 UI 与代码雨动画结合，可以创造出极具科幻感的赛博朋克风格界面：

  • 代码雨作为背景：设置较低透明度（0.4-0.6）
  • 玻璃卡片作为前景：调整配色为绿色系，与代码雨呼应
  • 发光效果统一：按钮和文字使用绿色荧光，增强整体感

3.2 组合效果演示（真实运行中）

Live Demo — Cyberpunk Combined Effect

🚀 进入矩阵

欢迎来到赛博朋克的世界，数据即一切

3.3 组合效果完整代码

CSS
/* 赛博朋克容器 */
.cyber-demo {
  background: #000;
  position: relative;
  overflow: hidden;
  min-height: 400px;
}

/* 代码雨背景 - 降低透明度 */
.cyber-canvas { 
  opacity: 0.55; 
  position: absolute;
  top: 0; 
  left: 0;
}

/* 玻璃卡片前景 - 绿色主题 */
.cyber-overlay {
  position: absolute;
  top: 0; left: 0;
  right: 0; bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.cyber-card {
  background: rgba(0, 255, 100, 0.07);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(0, 255, 100, 0.3);
  border-radius: 16px;
  padding: 32px;
  width: 300px;
  box-shadow: 0 0 40px rgba(0, 255, 100, 0.15);
}

四、实际应用场景

🎮 游戏官网

赛博朋克风格游戏的官方网站，增强沉浸感和世界观代入

💻 技术博客

程序员个人博客或技术文档站，展现极客风范

🔐 登录页面

后台管理系统或安全产品的登录界面，增强科技感

📊 数据看板

实时数据监控大屏，科幻风格提升视觉效果

📱 移动端适配建议

在移动端可以适当减少代码雨列数（15-20列），降低动画复杂度以保证性能。玻璃态卡片的模糊值可降至 10-15px，减少 GPU 负载。

五、浏览器兼容性

特性ChromeFirefoxSafariEdge
backdrop-filter✅ 76+✅ 103+✅ 9+ (-webkit-)✅ 79+
Canvas API✅ 全支持✅ 全支持✅ 全支持✅ 全支持
CSS Animation✅ 全支持✅ 全支持✅ 全支持✅ 全支持
text-shadow✅ 全支持✅ 全支持✅ 全支持✅ 全支持
⚠️ 注意事项

backdrop-filter 在 Firefox 103 之前不支持，Safari 需要添加 -webkit- 前缀。对于不支持的浏览器，建议使用 @supports 提供降级方案。

六、完整代码汇总

以下是本文所有效果的完整代码，可以直接复制到一个 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>玻璃态 UI + 代码雨动画</title>
<style>
  /* 基础样式 */
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body { font-family: sans-serif; background: #fff; color: #1a1a1a; line-height: 1.8; }

  /* 玻璃态容器 */
  .glass-container {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    min-height: 350px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
  }

  /* 玻璃态卡片 */
  .glass-card {
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 16px;
    padding: 30px;
    width: 300px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  }

  .glass-card h3 { color: white; text-align: center; margin-bottom: 10px; }
  .glass-card p { color: rgba(255,255,255,0.75); text-align: center; font-size: 13px; margin-bottom: 20px; }

  .glass-input {
    width: 100%; padding: 10px 14px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 8px; color: white; margin-bottom: 12px;
  }

  .glass-btn {
    width: 100%; padding: 11px;
    background: rgba(255,255,255,0.2);
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 8px; color: white; cursor: pointer;
    transition: all 0.3s;
  }

  .glass-btn:hover { background: rgba(255,255,255,0.3); transform: translateY(-1px); }

  /* 代码雨容器 */
  .matrix-container {
    background: #000;
    position: relative;
    overflow: hidden;
    height: 350px;
    border-radius: 8px;
  }

  .matrix-canvas {
    display: block;
    width: 100%;
    height: 100%;
  }

  /* 赛博朋克容器 */
  .cyber-container {
    background: #000;
    position: relative;
    overflow: hidden;
    height: 400px;
    border-radius: 8px;
  }

  .cyber-canvas {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    opacity: 0.55;
  }

  .cyber-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
  }

  .cyber-card {
    background: rgba(0, 255, 100, 0.07);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(0, 255, 100, 0.3);
    border-radius: 16px;
    padding: 32px;
    width: 300px;
    box-shadow: 0 0 40px rgba(0, 255, 100, 0.15);
  }

  .cyber-card h3 {
    color: #0f0;
    text-shadow: 0 0 12px #0f0, 0 0 24px #0f0;
    text-align: center; margin-bottom: 10px;
  }

  .cyber-card p {
    color: rgba(0, 255, 100, 0.75);
    text-align: center; font-size: 13px; margin-bottom: 20px;
  }

  .cyber-btn {
    width: 100%; padding: 12px;
    background: rgba(0, 255, 100, 0.15);
    border: 1px solid rgba(0, 255, 100, 0.4);
    border-radius: 8px;
    color: #0f0;
    text-shadow: 0 0 6px #0f0;
    cursor: pointer;
    transition: all 0.3s;
  }

  .cyber-btn:hover {
    background: rgba(0, 255, 100, 0.25);
    box-shadow: 0 0 24px rgba(0, 255, 100, 0.3);
    transform: translateY(-2px);
  }
</style>
</head>
<body style="padding: 20px; max-width: 900px; margin: 0 auto;">

<h2>1. 玻璃态卡片</h2>
<div class="glass-container">
  <div class="glass-card">
    <h3>✨ 玻璃态卡片</h3>
    <p>透过磨砂玻璃看世界，朦胧中透着美感</p>
    <input type="text" class="glass-input" placeholder="输入用户名...">
    <button class="glass-btn">进入系统</button>
  </div>
</div>

<h2 style="margin-top: 40px;">2. 代码雨动画</h2>
<div class="matrix-container">
  <canvas id="matrixCanvas" class="matrix-canvas"></canvas>
</div>

<h2 style="margin-top: 40px;">3. 赛博朋克组合效果</h2>
<div class="cyber-container">
  <canvas id="cyberCanvas" class="cyber-canvas"></canvas>
  <div class="cyber-overlay">
    <div class="cyber-card">
      <h3>🚀 进入矩阵</h3>
      <p>欢迎来到赛博朋克的世界，数据即一切</p>
      <button class="cyber-btn">连接系统</button>
    </div>
  </div>
</div>

<script>
  // Matrix 字符集
  const CHARS = 'アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン0123456789';

  // 代码雨类
  class MatrixRain {
    constructor(canvasId, containerSelector) {
      this.canvas = document.getElementById(canvasId);
      this.container = this.canvas.parentElement;
      this.ctx = this.canvas.getContext('2d');
      this.fontSize = 15;
      this.drops = [];
      this.init();
    }
    
    init() {
      this.resize();
      window.addEventListener('resize', () => this.resize());
      this.animate();
    }
    
    resize() {
      this.canvas.width = this.container.offsetWidth;
      this.canvas.height = this.container.offsetHeight;
      const columns = Math.floor(this.canvas.width / this.fontSize);
      this.drops = Array(columns).fill(1).map(() => Math.random() * -50);
    }
    
    draw() {
      this.ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
      this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
      
      this.ctx.font = this.fontSize + 'px monospace';
      
      for (let i = 0; i < this.drops.length; i++) {
        const char = CHARS[Math.floor(Math.random() * CHARS.length)];
        const x = i * this.fontSize;
        const y = this.drops[i] * this.fontSize;
        
        this.ctx.fillStyle = Math.random() > 0.98 ? '#fff' : '#0f0';
        this.ctx.fillText(char, x, y);
        
        if (y > this.canvas.height && Math.random() > 0.975) {
          this.drops[i] = 0;
        }
        this.drops[i] += 0.5 + Math.random() * 0.5;
      }
    }
    
    animate() {
      this.draw();
      requestAnimationFrame(() => this.animate());
    }
  }

  // 初始化两个代码雨实例
  window.addEventListener('load', () => {
    new MatrixRain('matrixCanvas');
    new MatrixRain('cyberCanvas');
  });
</script>
</body>
</html>
📝 使用方法

将以上代码复制到一个 .html 文件中（例如 demo.html），然后用浏览器直接打开即可看到所有效果。

© 荣小站 · 技术文章 · 欢迎交流学习

#玻璃态 UI + 代码雨动画：赛博朋克风格界面实现(1)

评论