Appearance
矩阵代码雨
致敬经典电影《黑客帝国》的矩阵代码雨效果，使用多列字符配合错开的下落动画，纯 CSS 实现。
实时预览
代码
css
.matrix-container {
position: relative;
width: 100%;
height: 300px;
background: #000;
overflow: hidden;
border-radius: 12px;
}
.matrix-col {
position: absolute;
top: -100%;
font-family: 'Courier New', monospace;
font-size: 14px;
line-height: 1.2;
color: #00ff41;
text-shadow: 0 0 8px rgba(0, 255, 65, 0.8);
writing-mode: vertical-lr;
letter-spacing: 8px;
white-space: nowrap;
animation: matrix-fall linear infinite;
}
/* Vary per column */
.matrix-col:nth-child(1) { left: 3%; animation-duration: 3.2s; animation-delay: 0s; }
.matrix-col:nth-child(2) { left: 10%; animation-duration: 4.0s; animation-delay: 0.5s; }
/* ... */
@keyframes matrix-fall {
0% { top: -100%; opacity: 1; }
85% { opacity: 0.7; }
100% { top: 120%; opacity: 0; }
}html
<div class="matrix-container">
<div class="matrix-col">01101001 10110</div>
<div class="matrix-col">10100110 ハッカー</div>
<!-- more columns with binary + katakana -->
</div>纯 CSS 实现的矩阵代码雨背景动画——通过渐变、滤镜和 @keyframes 创建动态背景效果。无需 Canvas、WebGL 或任何 JavaScript，即可让页面背景"活"起来。
快速使用
- 复制 CSS 代码（含
@keyframes）到你的样式文件中 - 将背景动画样式应用到目标容器元素上
- 调整
background-size和animation-duration控制效果 - 确保容器有明确的高度（
min-height），否则背景可能不可见
使用场景
- 品牌落地页：用渐变流动或极光背景提升页面的高级感
- 技术/黑客主题页面：矩阵代码雨或粒子背景传递科技氛围
- 创意/设计类网站：浮动光斑或网格动画展现设计感
- 节日/活动页面：动态背景配合主题色营造节日氛围
常见问题
Q: 背景动画会消耗很多 CPU 吗？ A: 会消耗一定的 GPU 资源。建议在用户不可见时（如切换标签页）暂停动画，用 animation-play-state: paused 配合 document.hidden API。移动端慎用多个滤镜叠加。
Q: 如何让背景动画不影响内容可读性？ A: 在动画层之上加一个半透明遮罩层（如 background: rgba(0,0,0,0.4)），或将文字放在独立的叠层中。也可以降低动画的 opacity 到 0.3~0.5。
Q: 背景动画在所有浏览器下都正常吗？ A: conic-gradient 需要较新浏览器版本。@property 仅 Chrome/Edge。建议提供降级方案：用 linear-gradient + background-position 动画替代。
浏览器兼容性
| 浏览器 | 兼容性 |
|---|---|
| Chrome / Edge | ✅ 完全支持（含 conic-gradient、@property） |
| Firefox | ✅ 基本支持（不含 @property） |
| Safari | ✅ 基本支持 |
| 移动端浏览器 | ✅ 完全支持 |
| IE 11 | ❌ 高级渐变和动画不支持 |
使用说明
| 属性 | 说明 |
|---|---|
writing-mode: vertical-lr | 让字符垂直排列 |
animation-duration | 控制下落速度，2-5s 效果自然 |
animation-delay | 错开各列，避免同步出现 |
color: #00ff41 | 经典矩阵绿色 |
text-shadow | 发光效果增强科技感 |
letter-spacing | 字符间距，控制密度 |
提示： 混合使用数字 01101001 和日文片假名 カ キ ク 来增加真实感。可以制作更多列并随机化参数来获得更密集的矩阵效果。