[分享]css做的动画背景图

CSS动画背景图是一种使用CSS技术来制作动态背景的方法。通过设置多个不同的CSS动画，可以为网站或应用程序添加更加动态和吸引人的背景元素。下面是一个示例代码，展示如何使用CSS动画来创建一个流动的墙...

CSS动画背景图是一种使用CSS技术来制作动态背景的方法。通过设置多个不同的CSS动画，可以为网站或应用程序添加更加动态和吸引人的背景元素。

下面是一个示例代码，展示如何使用CSS动画来创建一个流动的墙壁背景。代码示例使用pre标签包裹，以便于显示代码格式。

.wall {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #4d4d4d;
  animation: wall 15s linear infinite;
}

.wall::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    linear-gradient(90deg, transparent 10%, #FFF 10%, #FFF 90%, transparent 90%),
    linear-gradient(180deg, transparent 10%, #FFF 10%, #FFF 90%, transparent 90%);
  background-size: 20px 20px;
  animation: move 1.5s linear infinite;
}

@keyframes wall {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 400px 0;
  }
}

@keyframes move {
  from {
    transform: translateX(-20px);
  }
  to {
    transform: translateX(0);
  }
} 

在上面的代码中，我们使用CSS动画来制作一个流动的墙壁背景。首先，我们在.wall类中设置了动画属性，使得背景颜色从一侧顺着屏幕流动到另一侧。

然后，我们在.wall::before伪类中创建了一个网格背景，并给它设置了一个动画，使得整个网格背景向右移动。通过设置动画的方向和时长，我们可以控制网格的流动速度和方向。

最后，通过设置@keyframes规则，我们可以更细粒度地控制动画的细节。在这个示例中，我们设置了两个动画关键帧，告诉浏览器在何时何地修改背景颜色和位置。通过调整关键帧的数值，我们可以轻松地创建各种不同的动态背景效果。