Question

我试图创建一个由4张图片组成的动画HTML / CSS横幅添加（HPU 300x600px最大80KB）（从一个到下一个过渡的4个阶段平滑淡入淡出）。为了保持文件大小不变，我已经制作了图像2,3和2。 4部分透明，其想法是淡入并叠加制作最终图像。

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

我还在这里尝试了演示3（多个图像演示）：http://css3.bradshawenterprises.com/cfimg/#cfimg3但在第一个循环中显示了所有4个图像。

我还能尝试什么？谢谢！

Answer 1

我也开发了疯狂大小的横幅; D

我有这个例子，我认为你的相似 http://codepen.io/tarod_spj/pen/EyxVrg

在这种情况下，我将元素放在绝对的差异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作为广告的背景。

如果您能解释更多您需要的东西，我可以帮助您更好

css图像叠加过渡

1 个答案: