html - 在特定位置的 css 图像淡入/淡出库

Question

我有一个 fiddle ，如下图所示，在显示 图片 6 的左侧的 位置 4(用黄色圆圈标记)，我想要 交叉淡入淡出(淡入/淡出) 要发生的图片库。

在位置 4，我希望 3 个图像(图 4、图 5、图 6) 发生淡入淡出(淡入/淡出) .

https://jsfiddle.net/k0vzthne/embedded/result

这是我用过的CSS代码。此刻，我没有看到位置 4 处有任何交叉淡入淡出(淡入/淡出)图像库。

.featured-block a:nth-of-type(4), .featured-block a:nth-of-type(5), .featured-block a:nth-of-type(6) {
  position: absolute;
  right: 568px;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 12s;
  opacity: 0;
}

.featured-block a:nth-of-type(4) {
  animation-delay: 0s;
}

.featured-block a:nth-of-type(5) {
  animation-delay: 4s;
}


.featured-block a:nth-of-type(6) {
  animation-delay: 8s;
}

@keyframes cf4FadeInOut {
    0% {opacity: 0;}
    20% {opacity: 1;z-index: 999;}
    33% {opacity: 1;}
    53% {opacity: 0;z-index: 1;}
    100% {opacity: 0;}
}

问题陈述:

我想知道我应该对 fiddle 进行哪些更改，以便在位置 4 处发生 3 个图像的淡入/淡出。

Answer 1

显示存在问题:如所述here flex 到容器和容器上子项的绝对位置.

考虑到这一点，这是我的答案:

.featured-block {width: 1000px;}
.featured-block a { display: inline-block; opacity: 1;}

a:nth-of-type(4), .featured-block a:nth-of-type(5), .featured-block a:nth-of-type(6) { 
  position: absolute; 
  animation: 12s infinite ease-in-out cf4FadeInOut;
  opacity: 0;
  z-index:1;
}

.featured-block a:nth-of-type(4) { animation-delay: 0s; }
.featured-block a:nth-of-type(5) { animation-delay: 4s; }
.featured-block a:nth-of-type(6) { animation-delay: 8s; }

@keyframes cf4FadeInOut {
    0% {opacity: 0;}
    20% {opacity: 1;}
    33% {opacity: 1;}
    53% {opacity: 0;}
    100% {opacity: 0;}
}

<div class="featured-block">
  
  <a href="https://www.google.com/" class="featured-block__item cf">
    <div class="featured-block__item-inner">
      <figure class="featured-block__image img-fit" itemprop="image" itemscope="" itemtype="http://schema.org/ImageObject">
        <img class="default-opacity" src="https://via.placeholder.com/200x100?text=picture%201" data-fallback-img="https://via.placeholder.com/200x100?text=picture%201" alt="Outburst">
      </figure>
    </div>
  </a>
  
  <a href="https://www.facebook.com/" class="featured-block__item cf">
    <div class="featured-block__item-inner">
      <figure class="featured-block__image img-fit" itemprop="image" itemscope="" itemtype="http://schema.org/ImageObject">
        <img class="default-opacity" src="https://via.placeholder.com/200x100?text=picture%202" data-fallback-img="https://via.placeholder.com/200x100?text=picture%202" 
		alt="L'Essentiel with Esther Bégin">
      </figure>
    </div>
  </a>
  
  <a href="https://www.linkedin.com/" class="featured-block__item cf">
    <div class="featured-block__item-inner">
      <figure class="featured-block__image img-fit" itemprop="image" itemscope="" itemtype="http://schema.org/ImageObject">
        <img class="default-opacity" src="https://via.placeholder.com/200x100?text=picture%203" data-fallback-img="https://via.placeholder.com/200x100?text=picture%203" alt="Outburst">
      </figure>
    </div>
  </a>
  
  <a href="https://www.twiiter.com/" class="featured-block__item cf">
    <div class="featured-block__item-inner">
      <figure class="featured-block__image img-fit" itemprop="image" itemscope="" itemtype="http://schema.org/ImageObject">
        <img class="default-opacity" src="https://via.placeholder.com/200x100?text=picture%204" data-fallback-img="https://via.placeholder.com/200x100?text=picture%204" alt="L'Essentiel with Esther Bégin">
      </figure>
    </div>
  </a>
  
   <a href="https://www.amazon.com/" class="featured-block__item cf">
    <div class="featured-block__item-inner">
      <figure class="featured-block__image img-fit" itemprop="image" itemscope="" itemtype="http://schema.org/ImageObject">
        <img class="default-opacity" src="https://via.placeholder.com/200x100?text=picture%205" data-fallback-img="https://via.placeholder.com/200x100?text=picture%205" alt="Outburst">
      </figure>
    </div>
  </a>
  
  <a href="https://www.expedia.com/" class="featured-block__item cf">
    <div class="featured-block__item-inner">
      <figure class="featured-block__image img-fit" itemprop="image" itemscope="" itemtype="http://schema.org/ImageObject">
        <img class="default-opacity" src="https://via.placeholder.com/200x100?text=picture%206" data-fallback-img="https://via.placeholder.com/200x100?text=picture%206" alt="L'Essentiel with Esther Bégin">
      </figure>
    </div>
  </a>

</div>