有什么方法可以使我的背景图像具有滚动效果/像选取框类型的效果吗？

Question

我尝试了很多使用动画关键帧的不同方法。我好像做不到。

我基本上希望我的背景从左到右动画并重复，就像选取框一样，但作为我的背景。

似乎对我来说唯一的解决办法就是为我的背景制作一个 gif，但这对我来说真的很费时间。

Answer 1

试试这个。

#animate-area { 
    width: 560px; 
    height: 400px; 
    background-image: url('http://labs.designoptimizer.net/snip/bg-clouds.png');
    background-position: 0px 0px;
    background-repeat: repeat-x;
    animation: animatedBackground 40s linear infinite;
}
@keyframes animatedBackground {
    from { background-position: 0 0; }
    to { background-position: 100% 0; }
}

<div id="animate-area"></div>

Answer 2

使用动画关键帧使其工作

.background{
background: url(https://dummyimage.com/1500x700/);
    width: 560px; 
 height: 400px; 
background-position: 0px 0px;
 background-repeat: repeat-x;
    background-size: cover;
    animation: animation_back 2s linear infinite;
}
@keyframes animation_back {
 from { background-position: 0 0; }
 to { background-position: 200% 0; }
}

<div class="background">

</div>

Answer 3

为了避免动画中的跳跃（一旦它到达终点并重新开始），我会将带有 repeat-x 的图像移动到夸张的 x 坐标，如下所示：

html {
  margin:0;padding:0; height:100%;
}
body  {
  height:100%;
  background-image:url(https://i.imgur.com/aCDecXL.jpg);
  background-size: auto 100%;
  overflow:hidden;
  background-repeat:repeat-x;
  animation: scroll 700000s infinite linear;
  
}
@keyframes scroll {
  from { background-position: 0%; }
  to { background-position: 90000000%; }
}

有什么方法可以使我的背景图像具有滚动效果/像选取框类型的效果吗？

Is there any way I can animate my background image to have a scrolling / like marquee type effect?

html

javascript

css

background

background-image