Appearance
条纹动画
条纹滚动效果
实时预览
条纹动画
代码
css
.stripes-bg{width:300px;height:200px;border-radius:12px;background:repeating-linear-gradient(45deg,#667eea 0,#667eea 10px,#764ba2 10px,#764ba2 20px);background-size:28px 28px;animation:stripes-move 1s linear infinite;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:14px}
@keyframes stripes-move{to{background-position:28px 0}}纯 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 | ❌ 高级渐变和动画不支持 |