2016-05-17 153 views
0

我正在尝试创建一个由4幅图像组成的动画HTML/CSS横幅添加(HPU 300x600px max.80KB)(从一个转换到下一个转换平滑淡入淡出的4个阶段)。为了保持文件的大小,我做了部分透明的图像2,并且想法是它们淡入和覆盖制作最终图像。css图像重叠转换

我试过这个答案的方法:Multiple image cross fading in CSS - without (java) script但是图像在每次转换中都消失了。

我也尝试过演示3(演示与多个图像)在这里:http://css3.bradshawenterprises.com/cfimg/#cfimg3但在第一个循环中显示所有4个图像。

我还能试试吗?谢谢!

回答

0

我开发疯尺寸过横幅; d

我有这样的例子,我觉得是你的 http://codepen.io/tarod_spj/pen/EyxVrg

在这种情况下,类似我把元素绝对有这样的diferents的z-index :

.img1 { 
    .animationSimple(animationIn forwards @timeImg1 ease @delayImg1 1); z-index: 10; 
} 

.img2 { 
    .animationSimple(animationIn forwards @delayImg2 ease @delayImg2 1); z-index: 20; 
} 

它们都以不透明度开始:0; 和第一个img我通常放在广告的背景。

如果你能解释更多你需要的,也许我可以帮助你更好