Question

我使用背景位置属性在某种程度上实现了无限滚动背景。但问题是我给出了值background-position：0 200px 在关键帧中，向下移动到200px后，背景图像从头开始重新开始运动。我不希望这种情况发生，它应无限滚动而不会出现任何打嗝。怎么做？

这是代码。

html：

 <div id="cloud-scroll"></div>

的CSS：

       #cloud-scroll {
        width: 275px;
       height: 183px;
       background: url(http://www.html5andbeyond.com/3t-JAiBqopF/uploads/2014/10/clouds-full.png);
      background-size:cover;
      -webkit-animation: backgroundScroll 20s linear infinite;
      animation: backgroundScroll 20s linear infinite;
       }

       @-webkit-keyframes backgroundScroll {
          from {background-position:0;}
          to {background-position:0 200px;}
       }

      @keyframes backgroundScroll {
       from {background-position:0;}
        to {background-position:0 200px;}
       }

Answer 1

您应该使用背景重复并设置背景图像，以便在垂直（或水平，如果您正在做的事情）重复时，它是无缝的。

Answer 2

你的div是183px高，所以你应该在你的动画中使用183px。

@keyframes backgroundScroll {
   from {background-position:0;}
   to {background-position:0 183px;}
}

无限滚动背景

2 个答案: