Question

现在已经找了两天但毕竟谷歌搜索仍然不知道如何实现我想要的目标。

希望有人能帮助我。

我希望我的背景图像像这样移动：http://www.theophile-patachou.com/nl/

有什么建议吗？通过stackoverflow挖掘，就像我正在搜索黄金但没有结果......

猜猜要走的路是css变换吗？

我尝试使用这些示例来构建它，但结果实际上并不理想http://www.sitepoint.com/css3-transform-background-image/

Answer 1

您也可以使用css @keyframes

执行此操作

@keyframes background-animation {
    0%   { background-size:100% auto; }
    50% { background-size:150% auto; }
    100% { background-size:100% auto; }
}

#divwiththebackground {
  animation:background-animation 10s infinite;
}

这会将背景从div的宽度100％设置为div的宽度的150％并返回10秒以上（这可以缩短/更长，动画可以更改，即移动背景也是如此与背景位置）

Answer 2

您可以使用jquery animate函数（http://api.jquery.com/animate/）来实现缩放效果。

$('img').animate({width:'+=300',height:'+=300'},16000);
$('img').animate({width:'-=300',height:'-=300'},16000);

如果您需要使用setInterval并重复拨打电话。

setInterval(function(){
    $('img').animate({width:'+=300',height:'+=300'},16000);
    $('img').animate({width:'-=300',height:'-=300'},16000);
},32100);

移动全屏背景图像

2 个答案: