0

我正在尝试在彼此上方制作 4 个交叉淡入淡出的图像。我有这个，但它有一个小问题。

 <div>
   <img class="first-img" src="img1.jpg">
    <img class="second-img" src="img2.jpg">
    <img class="third-img" src="img3.jpg">
    <img class="fourth-img" src="img4.jpg">
 </div>

CSS：

 img {
 position: absolute;
 top: 0;
 left: 0;
 animation: crossfade 20s infinite;
 }

 .first-img {
 z-index: 4;
 }

 .second-img {
 z-index: 3;
 animation-delay: 5s;
 }

 .third-img {
 z-index: 2;
 animation-delay: 10s;
 }

 .fourth-img {
 z-index: 1;
 animation-delay: 15s;
 }

 @keyframes crossfade {
 0% {opacity: 1;}
 15% {opacity: 1;}
 25% {opacity: 0;}
 90% {opacity: 0;}
 100% {opacity: 1;}
 }

问题在最后一张图像（第四张）之后开始，第四张图像淡入背景，然后第一张图像再次开始循环。我想摆脱循环结束之间的这种奇怪的剪辑，最后一个图像淡入背景一小会儿，使第四个图像直接与循环结束处的第一个图像交叉淡入淡出的完美动画值是什么?

4

1 回答 1

2

如果您注意到，它不仅是最后一个图像..它是第一个循环之后的所有图像。

发生这种情况是因为您的图像都以opacity:1（默认值）开头。但是在他们开始制作动画之后，keyframes现在opacity他们都为 0，除了每次交叉淡入淡出的两个。

当它们交叉淡入淡出时，一个来自 0-1，另一个来自 1-0，它们处于半透明的不同阶段，因此背景也会渗入。避免它的唯一方法是淡化新图像覆盖现有图像并在完全显示后将前一个图像设置为 0 不透明度。

尝试

@keyframes crossfade {
    0% {opacity: 1; z-index:10}
   15% {opacity: 1;}
   25% {opacity: 0;}
   80% {opacity: 0; z-index:1}
   90% {opacity: 1;}
  100% {opacity: 1; z-index:1}
}

演示在http://codepen.io/gpetrioli/pen/hyrjl

于 2013-11-12T17:36:30.693 回答