Appearance
渐变网格动画
多个彩色渐变区域以不同方向缓慢移动和变形，形成梦幻的流动网格效果，适合用作现代网页背景。
实时预览
代码
css
.mesh-gradient {
width: 100%;
height: 300px;
background: #0a0a1a;
position: relative;
overflow: hidden;
}
.mesh-gradient .blob {
position: absolute;
border-radius: 50%;
filter: blur(60px);
mix-blend-mode: screen;
}
.mesh-gradient .blob:nth-child(1) {
width: 280px; height: 280px;
background: radial-gradient(circle, #667eea 0%, transparent 70%);
top: -20%; left: 10%;
animation: mesh-drift-1 7s ease-in-out infinite alternate;
}
@keyframes mesh-drift-1 {
0% { transform: translate(0, 0) scale(1); }
100% { transform: translate(60px, 40px) scale(1.2); }
}html
<div class="mesh-gradient">
<div class="blob"></div>
<div class="blob"></div>
<div class="blob"></div>
<!-- 5+ blobs with different colors and positions -->
</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 | ❌ 高级渐变和动画不支持 |
使用说明
| 属性 | 说明 |
|---|---|
filter: blur(60px) | 柔化边缘，让色块融合更自然 |
mix-blend-mode: screen | 叠加混合模式，颜色交界处变亮 |
radial-gradient | 从实色到透明的径向渐变 |
animation-duration | 每个色块用不同的时长 (6-10s) |
animation-direction: alternate | 来回运动而非循环 |
overflow: hidden | 裁剪超出边界的色块 |
提示： 增加更多 blob 并选择互补色或邻近色可以让网格更丰富。mix-blend-mode 的不同值（screen、multiply、overlay）会产生截然不同的融合效果。