CSS动画实现背景无缝无限循环的实现示例

CSS动画可以很好地为网站增加交互性和美观性。而实现背景无缝无限循环动画，可以让网站更具视觉吸引力。下面，我将为大家介绍CSS动画实现背景无缝无限循环的示例攻略。

标题一：使用CSS动画实现背景无缝无限循环

步骤一：设置背景图像

在HTML中设置一个容器，并将背景图像设置为容器的背景图片：

<div class="bg-image"></div>

.bg-image {
  background-image: url('path/to/image.jpg');
  background-repeat: repeat;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
}

步骤二：动画实现

使用CSS动画将背景图像向左移动，当它到达容器的左侧时，将其重新定位，并设置无限循环：

.bg-image {
  background-position: 0 0;
  animation: bg-scroll 20s linear infinite;
}

@keyframes bg-scroll {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -2000px 0;
  }
}

• animation属性：告诉浏览器使用bg-scroll动画，并将其一直循环播放
• @keyframes: 指定了bg-scroll动画的动画效果。 创建一个从 0% 到 100% 的动画，将背景图像的位置设置为从初始位置开始向左移动 -2000px

标题二：使用CSS动画实现三张背景图片的循环切换

步骤一：设置容器和背景图像

在HTML中设置一个包含三个容器的父容器，将三张背景图像分别设置为三个容器背景图片的位置上。

<div class="bg-mult-image">
  <div class="bg-image bg-1"></div>
  <div class="bg-image bg-2"></div>
  <div class="bg-image bg-3"></div>
</div>

.bg-image {
  background-repeat: repeat;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.bg-1 {
  background-image: url('path/to/image1.jpg');
  z-index: 3;
}

.bg-2 {
  background-image: url('path/to/image2.jpg');
  z-index: 2;
}

.bg-3 {
  background-image: url('path/to/image3.jpg');
  z-index: 1;
}

步骤二：动画实现

使用CSS动画将三张背景图像切换显示。让当前显示的背景向左移动，同时将下一张背景图片向左移动至当前可视区，将下下张背景图片置于下一张背景后。当当前背景移动至其父容器左侧时，将其置底并将下一张背景图片调整为当前背景图片。

.bg-image {
  animation: bg-scroll 20s linear infinite;
}

@keyframes bg-scroll {
  0% {
    background-position: 0 0;
    z-index: 3;
  }
  33.33% {
    background-position: -2000px 0;
    z-index: 3;
  }
  66.66% {
    background-position: -4000px 0;
    z-index: 3;
  }
  100% {
    background-position: -4000px 0;
    z-index: 1;
  }
}

将背景图片容器按照层叠顺序、移动方向和引用顺序设定好后，@keyframes从0%开始，每张图片的宽度为2000px，每次过渡的步伐为1秒，并在每张图片的第一帧中从z-index 3开始，以配合该图片的移动，使其呈现较高的图层。当图片占用其父元素的100%宽度时，将其移出视线，将其z-index转换为0，让下一张图片进入视线。每张图片的移动方向相同: 向左移动。

至此，CSS动画实现背景无缝无限循环，以及三张背景图片的循环切换示例，已经完成。