有淡入淡出效果完全背景图片有淡入淡出效果完全背景图片(Full background image w

 .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”的图像，你必须定义：

• 一个=呈现时间的一个图像
• 交叉衰落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％

源： 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> 

文章来源: Full background image with fade effect