Question

我正在努力实现给定背景图像在水平轴上移动并重复自身的效果，从而产生无限循环图像的幻觉效果。

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

＆＃13;

* {
  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;
}

＆＃13;

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

＆＃13;

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

有任何帮助吗？非常感谢！

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%;}
}

Answer 2

您正在更改左侧和顶部属性，有效地使元素变得越来越大，以及它的背景。

改为为背景位置设置动画。

@keyframes backgroundAnimate {
  from {
    background-position: left top;
  }
  to {
    background-position:right bottom
  }
}

你应该摆脱所有那些不必要的前缀;）

移动背景图像的大小随着移动而增加

2 个答案: