javascript - 移动的背景图片会随着移动而变大

Question

我正在尝试实现一种效果，即给定的背景图像在水平轴上移动并自行重复，从而产生无限循环图像的错觉效果。

我只使用 HTML 和 CSS，问题是随着时间的推移，背景图像会变大，我不知道为什么。我认为这里必须使用 Javascript/Jquery，但我是新手，而且我几乎停留在进步中，不知道解决方案。这是我迄今为止创建的代码笔。

https://codepen.io/Agnis/pen/aEQjPB

* {
  margin: 0px;
  padding: 0px;
}

body {
  background-color: white;
}

@-webkit-keyframes backgroundAnimate {
  from {
    left: 0;
    top: 0;
  }
  to {
    left: -10000px;
    top: -2000px;
  }
}

@-moz-keyframes backgroundAnimate {
  from {
    left: 0;
    top: 0;
  }
  to {
    left: -10000px;
    top: -2000px;
  }
}

@-o-keyframes backgroundAnimate {
  from {
    left: 0;
    top: 0;
  }
  to {
    left: -10000px;
    top: -2000px;
  }
}

@keyframes backgroundAnimate {
  from {
    left: 0;
    top: 0;
  }
  to {
    left: -10000px;
    top: -2000px;
  }
}

#back {
  background: url(https://image.ibb.co/gF0ZHR/imageedit_2_8525438394.png);
  position: fixed;
  top: 0;
  background-size: cover;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 1;
  z-index: -1;
  -webkit-animation-name: backgroundAnimate;
  -webkit-animation-duration: 200s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-name: backgroundAnimate;
  -moz-animation-duration: 5s;
  -moz-animation-timing-function: linear;
  -moz-animation-iteration-count: infinite;
  -o-animation-name: backgroundAnimate;
  -o-animation-duration: 200s;
  -o-animation-timing-function: linear;
  -o-animation-iteration-count: infinite;
  animation-name: backgroundAnimate;
  animation-duration: 200s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

#front {
  background: url(https://image.ibb.co/gF0ZHR/imageedit_2_8525438394.png) position: fixed;
  top: 0;
  left: 0;
  background-size: cover;
  right: 0;
  bottom: 0;
  opacity: 0.5;
  z-index: -1;
  -webkit-animation-name: backgroundAnimate;
  -webkit-animation-duration: 300s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-name: backgroundAnimate;
  -moz-animation-duration: 300s;
  -moz-animation-timing-function: linear;
  -moz-animation-iteration-count: infinite;
  -o-animation-name: backgroundAnimate;
  -o-animation-duration: 300s;
  -o-animation-timing-function: linear;
  -o-animation-iteration-count: infinite;
  animation-name: backgroundAnimate;
  animation-duration: 300s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

<div id="back"></div>
<div id="front"></div>

期望的效果是背景图像向左移动并且尺寸没有增加，这与现在发生的情况相反。

有什么帮助吗？非常感谢!

Answer 1

这是因为它正在增加。您使用 background-position:cover; ，这使得图像始终填充元素。如果元素的宽度增加一倍，则图像的宽度也会增加一倍以进行匹配。

你的 <div id="back"></div>持续增长，因此您的 BG 也在增长。

---

您可以为背景图像设置动画。下面的代码是一个简单的例子:

.elem{
    /* properties here */

    transition-property: background-position;
    transition-duration: 1s;

    animation-name: rotate; 
    animation-duration: 2s; 
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes rotate {
    from { background-position: -100%;}
    to {   background-position:    0%;}
}