javascript - 具有多个背景图像的动画

Question

我正在尝试为我的多个背景图像创建一些动画。

我有这个 CSS 代码：

header {
background-image: url('/img/cloud2.png'), url('/img/cloud3.png'), url('/img/cloud1.png'), url('/img/cloud4.png');
background-position: left bottom, 20% 40%, 40% bottom, right 85%;
background-repeat: no-repeat;
}

我只想在无限循环中移动云。这是我的 JavaScript 代码：

  $('header').animate({
    'background-position-x': '10%, 3%, 5%, 7%'
  }, 500, 'linear');

问题是这行不通。只有当我只写一个 background-position-x 值时它才有效。但在这种情况下，所有的云都从相同的 x 值开始。

Answer 1

看来您正在使用background-positioncss 和正在使用的 jquery background-position-x。为什么不尝试background-position使用 jquery 将 重置为您想要的值？