css - 具有淡入淡出效果的完整背景图像

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 自己的规则。

For "n" images you must define:

• a=presentation time for one image
• b=duration for cross fading
• Total animation-duration is of course t=(a+b)*n

animation-delay = t/n or = a+b

Percentage for keyframes:

1. 0%
2. a/t*100%
3. (a+b)/t*100% = 1/n*100%
4. 100%-(b/t*100%)
5. 100%

来源:http://css3.bradshawenterprises.com/cfimg/

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