動畫自動更改背景圖像

首先，我想問問，如果我可以更改背景圖像與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

動畫自動更改背景圖像

回答

相關問題