2011-05-19 96 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/