.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 一样
我尝试复制此内容，但图像没有正确淡入。我只是觉得少了点什么。将不胜感激任何与此相关的帮助。谢谢。
为了使图像正确地淡入和淡出，需要计算百分比和时间以使其看起来不错，如下所示，或者简单地给每个图像一个@keyframes他们自己的统治。
对于“n”张图像，您必须定义：
- a=一张图像的呈现时间
- b=交叉淡入淡出的持续时间
- 总动画持续时间当然是 t=(a+b)*n
动画延迟 = t/n 或 = a+b
关键帧的百分比：
- 0%
- a/t*100%
- (a+b)/t*100% = 1/n*100%
- 100%-(b/t*100%)
- 100%
Src: http://css3.bradshawenterprises.com/cfimg/ 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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
