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

您似乎在css和jquery中使用background-position background-position-x。为什么不尝试使用jquery将background-position重置为您想要的值？

动画与多个背景图像

1 个答案: