Question

我有一个如下所示的小提琴，其中在图片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;}
}

问题陈述：

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

Answer 1

显示存在问题：如here所述，弯曲到容器并在其上放置子项的绝对位置。

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

.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>

Answer 2

您需要指定动画名称：

.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: 12s infinite ease-in-out cf4FadeInOut;
  opacity: 0;
}

看看here

编辑：

显示订单问题的关键是使用负动画延迟：

.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: 12s infinite ease-in-out cf4FadeInOut;
  opacity:0;
}

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

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

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

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

采取look

css中特定位置的图像淡入/淡出画廊

2 个答案: