CSS 背景动画效果合集

静态背景已经过时了。CSS 背景动画让页面背景动起来——渐变、粒子、光斑、网格，全部纯 CSS 实现，无需 Canvas 或 WebGL。

本分类收录了 15 种 CSS 背景动画效果：

粒子类：CSS 粒子背景、星空闪烁、雨滴效果、矩阵代码雨
渐变类：渐变流动、脉冲渐变、锥形渐变、渐变网格
效果类：极光背景、浮动光斑、涟漪背景、波浪动画
纹理类：网格动画、圆点背景、条纹动画

热门背景效果推荐

核心技术

CSS 背景动画主要依赖 background-size 和 background-position 动画：

css

.animated-bg {
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background-size: 400% 400%;
  animation: gradient 15s ease infinite;
}
@keyframes gradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

Hover 效果 · 滚动动画 · 文字动画

友链

更多相关站点