Question

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

现在我想顺畅地在x轴上滑动图像，是否有任何轻量级插件或代码段？

任何建议都表示赞赏！

Answer 1

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

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

连续的x轴背景图像幻灯片

1 个答案: