带有褪色效果的全背景图像

Question

.crossfade > div {

    animation: imageAnimation 30s linear infinite 0s;

    backface-visibility: hidden;

    background-size: cover;

    background-position: center center;

    color: transparent;

    height: 100%;

    left: 0px;

    opacity: 0;

    position: fixed;

    top: 0px;

    width: 100%;

    z-index: 0;

  }



  .crossfade {

    height: 500px;

  }

  #fade1{

    background-image: url('../images/taxi.jpg');

  }

  #fade2 {

    animation-delay: 6s;

    background-image: url('../images/default.jpg');

  }

  #fade3 {

    animation-delay: 12s;

    background-image: url('../images/neuroBG.JPG');

  }

  #fade4 {

    animation-delay: 18s;

    background-image: url('../images/new4.jpeg');

  }

  #fade5 {

    animation-delay: 24s;

    background-image: url('../images/new3.jpg');

  }



  #fade6 {

    animation-delay: 30s;

    background-image: url('../images/new1.jpg');

  }



  #fade7 {

    animation-delay: 36s;

    background-image: url('../images/new2.jpeg');

  }


      <div class="crossfade">

            <div id="fade1"></div>

            <div id="fade2"></div>

            <div id="fade3"></div>

            <div id="fade4"></div>

            <div id="fade5"></div>

            <div id="fade6"></div>

            <div id="fade7"></div>

        </div>

我想像背景网站www.flitways.com那样使背景图像淡入淡出。

我曾尝试复制此图像，但是图像无法正常消失。我只是觉得那里缺少东西。将不胜感激对此的任何帮助。谢谢。

Answer 1

为了使图像正确地淡入和淡出，需要计算百分比和时间，以使其看起来不错，如下所述，或者只是给每个图像一个@keyframes自己的规则。

对于“ n”幅图像，您必须html" target="_blank">定义：

• a =一幅图像的演示时间
• b =交叉衰落的持续时间
• 总的动画持续时间当然是t =（a + b）* n
  
  

动画延迟= t / n或= a + b

关键帧百分比：

1. 0％
2. a / t * 100％
3. （a + b）/ t * 100％= 1 / n * 100％
4. 100％-（b / t * 100％）
5. 100％
   
   

.crossfade > div {

  animation: imageAnimation 8s linear infinite;

  backface-visibility: hidden;

  background-size: cover;

  background-position: center center;

  color: transparent;

  height: 100%;

  left: 0;

  position: fixed;

  top: 0;

  width: 100%;

}

.crossfade {

  height: 500px;

}

@keyframes imageAnimation {

  0% {

    opacity:1;

  }

  17% {

    opacity:1;

  }

  25% {

    opacity:0;

  }

  92% {

    opacity:0;

  }

  100% {

    opacity:1;

  }

}



.crossfade div:nth-of-type(1) {

  background-image: url(http://placehold.it/200/f00);

  animation-delay: 6s;

}

.crossfade div:nth-of-type(2) {

  background-image: url(http://placehold.it/200/0b0);

  animation-delay: 4s;

}

.crossfade div:nth-of-type(3) {

  background-image: url(http://placehold.it/200/00f);

  animation-delay: 2s;

}

.crossfade div:nth-of-type(4) {

  background-image: url(http://placehold.it/200/ff0);

  animation-delay: 0;

}


<div class="crossfade">

  <div></div>

  <div></div>

  <div></div>

  <div></div>

</div>