充分的背景图象与退色作用 [英] Full background image with fade effect

问题描述

.crossfade> div {animation：imageAnimation 30s线性无限0s; backface-visibility：hidden; background-size：cover; background-position：中心;颜色：透明;高度：100％; left：0px;不透明度：0;位置：固定; 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

我试过复制这个，但图像没有正确地消失。我只是觉得有东西缺失。将欣赏任何有关这方面的帮助。感谢。

解决方案

要使图像正常淡入和淡出，需要计算百分比和时间，或者只是给每个图像自己的 @keyframes 规则。

对于n张图片，您必须定义：

• a =一张图片的演示时间


• b =交叉淡化的持续时间


• 总动画持续时间当然是t =（a + b）* n

b $ b

animation-delay = 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％

Src： http： //css3.bradshawenterprises.com/cfimg/

 。交叉淡化> div {animation：imageAnimation 8s linear infinite; backface-visibility：hidden; background-size：cover; background-position：中心;颜色：透明;高度：100％;左：0;位置：固定; top：0; width：100％;}。crossfade {height：500px;} @ keywordframes 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>  

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

I will like to make a background image fade in and out just like this website www.flitways.com

I have tried replicate this but the images are not fading in properly. I just feel that there is something missing. Will appreciate any help as regards this. Thanks.

解决方案

To make images fade in and out properly, one need to calculate percentages and timings for it to look good, as done below, or simply give each image a @keyframes rule of their own.

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%

Src: 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>

这篇关于充分的背景图象与退色作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！