动画自动更改背景图像

首先，我想问问，如果我可以更改背景图像与CSS（如果不是在jquery或JavaScript的重点是构建简单的代码）。那么，第二，我想将背景分成不同大小的三个部分，然后将照片放在每个部分（三张照片）中，并且我希望每个部分的照片都是在秒数后随机更改的自动动画。对于examply我有在后台part1的2视频3和我有image1的图像2图像3图像4图像5 image6 image7所以它必须是这样的（例如）：动画自动更改背景图像

part1=image6 
part2=image3 
part3=image7

3秒后：

part1=image2(the other stays as it is)

2秒后：

part2=image1 
part3=image4

5秒后：

part3=image2 
part1=image4

等等。它似乎像每个用户配置文件中的照片instagram背景，是的，我想要这样的东西。

来源

2013-05-05 Ahmad Tantori

100％你有没有尝试过的东西？ – 2013-05-05 11:14:38

'喜欢instagram个人资料'...假设每个人都使用不太可能的instagram。创建你想要在jsfiddle.net中看起来像样子的模拟演示。就改变而言，使用jQuery'css（）'并不困难。你有什么尝试？ – charlietfl 2013-05-05 11:53:45

可能是这样的，如果用css

@-webkit-keyframes changeBG { 
from {background: url(image1.jpg);} 
to { background: url(image2.jp);} 
} 
@-moz-keyframes changeBG { 
from {background: url(image1.jpg);} 
to {background: url(image1.jpg);} 
}

，或者如果您想使用更多的图像，你可以使用CSS的关键帧开始从0％到这样

@-webkit-keyframes changeBG { 
     0% {background: url(image1.jpg);} 
     10% { background: url(image2.jp);} 
20% { background: url(image3.jp);} 
30% { background: url(image4.jp);} 
40% { background: url(image5.jp);} 
50% { background: url(image6.jp);} 
60% { background: url(image7.jp);} 
70% { background: url(image8.jp);} 
80% { background: url(image9.jp);} 
90% { background: url(image10.jp);} 
100% { background: url(image11.jp);} 
     }

来源

2013-05-05 11:32:58 Zhinto

第二个代码不起作用：/ – 2013-05-11 19:02:37

第一个代码如何...？无论工作......？ – Zhinto 2013-05-11 22:29:20

不能：/你可以试试看，然后告诉我它是否适用于你，给我一个例子？ – 2013-05-13 11:08:37

动画自动更改背景图像

回答

相关问题