css图像重叠转换

我正在尝试创建一个由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个图像。

我还能试试吗？谢谢！

来源

2016-05-17 Max

我开发疯尺寸过横幅; 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我通常放在广告的背景。

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

来源

2016-05-30 09:08:04

css图像重叠转换

回答

相关问题