2011-05-19 170 views
3

我有一個Div名爲splash它是473px寬和139px高。它有一個背景圖像應用於它。在Div內我有另外3個Div s。div背景圖片的CSS幻燈片 - 可能嗎?

我希望splash容器的背景圖像div可以通過不同的圖片淡入和淡出。

有什麼辦法可以實現這個使用CSS3?

你可以看到http://blackburnseo.com/ensor/

+2

@Viswanthan - 它使用JS:/ – seler 2011-05-19 15:47:18

+0

淡入淡出效果怎麼樣?引起衰落(如果有的話)的相互作用是什麼? – 2011-05-19 15:57:58

+0

@Kevin:我懷疑他正在尋找類似於['-webkit-animation'](http://www.webkit.org/blog/324/css-animation-2/)的東西, ,在我的實驗中,使用「背景圖像」(至少至少)。如果我是對的,那麼我認爲JavaScript(或其一個庫)是我意識到的實現此功能的唯一方法。 – 2011-05-19 16:05:45

回答

1

CSS3飛濺div有一個名爲「轉換」屬性/功能,可能能夠實現你要找的,SANS JS的影響。

經過一個快速的谷歌,我相信這可能是一個很好的開始。

http://css3.bradshawenterprises.com/transitions/

我不知道有多少瀏覽器已經實現了這個功能,雖然;另一個問題是,並非每個屬性都支持轉換(您可能會看到background-position

+0

對不起,我很遺憾。我不想要任何「觸發」動畫。我希望它通過平滑淡入淡出過渡的5個圖像旋轉。 – Dan 2011-05-19 18:12:32

1

可以使用transitions來完成,但它不會自動更改。

用戶必須以某種方式觸發轉換(:懸停,焦點等)。

檢查這裏的例子:http://jsfiddle.net/seler/zZCyf/