javascript - 连续 x 轴背景图像幻灯片

Question

我有一个带有大图像背景 css 规则的 div 元素。

现在我想在x轴平滑滑动图像，有没有轻量级的插件或片段？

任何建议表示赞赏！

Answer 1

这是 webkit 的样式：http: //jsbin.com/uzifag/2/

请注意，我将背景位置移动到图像的负宽度。如果您希望它是相反的方向，则正宽度将起作用。您可以根据需要播放动画的持续时间。

body{
  background:url(http://placekitten.com/1920/1080/) repeat-x center left;
  -webkit-animation: slidex 20s linear infinite;
     -moz-animation: slidex 20s linear infinite;
      -ms-animation: slidex 20s linear infinite;
       -o-animation: slidex 20s linear infinite;
          animation: slidex 20s linear infinite;
}

@-webkit-keyframes slidex
{
  FROM{background-position:0 center;}
  TO{background-position:-1920px center;}
}
@-moz-keyframes slidex
{
  FROM{background-position:0 center;}
  TO{background-position:-1920px center;}
}
@-ms-keyframes slidex
{
  FROM{background-position:0 center;}
  TO{background-position:-1920px center;}
}
@-o-keyframes slidex
{
  FROM{background-position:0 center;}
  TO{background-position:-1920px center;}
}
@keyframes slidex
{
  FROM{background-position:0 center;}
  TO{background-position:-1920px center;}
}