我使用CSS创建了一个交叉淡入淡出,但我在时间上遇到了困难。我想在每张图像之间延迟4秒或4秒但它不起作用。
#cf {
position:absolute;
margin:0 auto;
width: 100%;
height: 100%;
top: 0;
}
#cf img {
position:absolute;
left:0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
z-index: -1;
}
@-webkit-keyframes cf4FadeInOut {
0% {
opacity:1;
}
15% {
opacity:1;
}
55% {
opacity:0;
}
100% {
opacity:0;
}
}
@-moz-keyframes cf4FadeInOut {
0% {
opacity:1;
}
15% {
opacity:1;
}
55% {
opacity:0;
}
100% {
opacity:0;
}
}
@-o-keyframes cf4FadeInOut {
0% {
opacity:1;
}
15% {
opacity:1;
}
55% {
opacity:0;
}
100% {
opacity:0;
}
}
@keyframes cf3FadeInOut {
0% {
opacity:1;
}
15% {
opacity:1;
}
55% {
opacity:0;
}
100% {
opacity:0;
}
}
#cf img {
animation-name: cf3FadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 4s;
animation-direction: alternate;
}
#cf img:nth-of-type(1) { /* Wakame */
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
animation-delay: 24s;
}
#cf img:nth-of-type(2) { /*Meraki */
-webkit-animation-delay: 20s;
-moz-animation-delay: 20s;
-o-animation-delay: 20s;
animation-delay: 20s;
}
#cf img:nth-of-type(3) { /* Trabzoni */
-webkit-animation-delay: 16s;
-moz-animation-delay: 16s;
-o-animation-delay: 16s;
animation-delay: 16s;
}
#cf img:nth-of-type(4) { /* SPS */
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
animation-delay: 12s;
}
#cf img:nth-of-type(5) { /* Balad */
-webkit-animation-delay: 8s;
-moz-animation-delay: 8s;
-o-animation-delay: 8s;
animation-delay: 8s;
}
#cf img:nth-of-type(6) { /* Wesal */
-webkit-animation-delay: 4s;
-moz-animation-delay: 4s;
-o-animation-delay: 4s;
animation-delay: 4s;
}
<div id="cf">
<img class="img-responsive" src="http://ddragon.leagueoflegends.com/cdn/img/champion/splash/Ezreal_0.jpg" />
<img class="img-responsive" src="http://vignette2.wikia.nocookie.net/leagueoflegends/images/6/6b/Ezreal_NottinghamSkin.jpg/revision/latest?cb=20160518164441" />
<img class="img-responsive" src="https://s-media-cache-ak0.pinimg.com/originals/a3/99/59/a399593448b739ee3cb164f74f22d89a.jpg" />
<img class="img-responsive" src="https://i.ytimg.com/vi/nOmafJzhUrk/maxresdefault.jpg" />
<img class="img-responsive" src="http://art-of-lol.com/wp-content/uploads/2015/12/ezreal_by_cglas-d8smd2g.jpg" />
<img class="img-responsive" src="http://pre14.deviantart.net/81ae/th/pre/i/2015/345/5/c/ezreal_by_tanzenkat-d9jrcvc.jpg" />
</div>
此外,除了时间,当图像交叉淡入淡出时,在第二张图像之后,它会一直回到第一张图像,而其余部分则不会显示或很快显示和淡化。
答案 0 :(得分:3)
我想在每张图片之间延迟4秒或4秒,但事实并非如此 工作
为了使时机正确,你需要记住一些计算。
animation-delay
。animation-duration
。在这种情况下,您在步骤#3中计算5秒,并且您有6张图像。因此,animation-duration
将为5 x 6 = 30
,即 30秒。 100%
除以您在步骤#4中获得的数字。这将成为keyframes
。在这种情况下,您有30秒的动画持续时间。因此,您的关键帧将以每个关键帧的100% / 30 = 3.33
,即 3.33%为步长。每帧将代表1秒。3.33%
,您将有opacity: 1
在1秒后显示图像。然后,对于6.66%
,9.99%
和13.33%
中的每一个,它将保持为opacity:1
。即从0开始持续4秒,图像将保持可见。然后在帧16.65
上将不透明度恢复为0.即在第5秒,图像将淡出。然后保持隐藏直到100%,即直到所有剩余的25秒。把这一切放在一起,你得到:
从步骤3开始:
#cf img:nth-child(1) { animation-delay: 0s; }
#cf img:nth-child(2) { animation-delay: 5s; }
#cf img:nth-child(3) { animation-delay: 10s; }
#cf img:nth-child(4) { animation-delay: 15s; }
#cf img:nth-child(5) { animation-delay: 20s; }
#cf img:nth-child(6) { animation-delay: 25s; }
从第4步开始:
#cf img { animation: fader 30s linear infinite; }
并且,从步骤#5和#6(从步骤#1和#2 推断):
@keyframes fader {
0% { opacity: 0; }
03.33% { opacity: 1; }
06.66% { opacity: 1; }
09.99% { opacity: 1; }
13.33% { opacity: 1; }
16.65% { opacity: 0; }
100% { opacity: 0; }
}
就是这样。以下是完整的代码段:
<强>段:强>
html, body { height: 100%; width: 100%; overflow: hidden; }
#cf {
position: relative; margin: 0 auto;
width: 100%; height: 100%;
}
#cf img {
position: absolute; left: 0; top: 0; opacity: 0;
animation: fader 30s linear infinite;
}
#cf img:nth-child(1) { animation-delay: 0s; }
#cf img:nth-child(2) { animation-delay: 5s; }
#cf img:nth-child(3) { animation-delay: 10s; }
#cf img:nth-child(4) { animation-delay: 15s; }
#cf img:nth-child(5) { animation-delay: 20s; }
#cf img:nth-child(6) { animation-delay: 25s; }
@keyframes fader {
0% { opacity: 0; }
03.33% { opacity: 1; }
06.66% { opacity: 1; }
09.99% { opacity: 1; }
13.33% { opacity: 1; }
16.65% { opacity: 0; }
100% { opacity: 0; }
}
<div id="cf">
<img class="img-responsive" src="http://ddragon.leagueoflegends.com/cdn/img/champion/splash/Ezreal_0.jpg" />
<img class="img-responsive" src="http://vignette2.wikia.nocookie.net/leagueoflegends/images/6/6b/Ezreal_NottinghamSkin.jpg/revision/latest?cb=20160518164441" />
<img class="img-responsive" src="https://s-media-cache-ak0.pinimg.com/originals/a3/99/59/a399593448b739ee3cb164f74f22d89a.jpg" />
<img class="img-responsive" src="https://i.ytimg.com/vi/nOmafJzhUrk/maxresdefault.jpg" />
<img class="img-responsive" src="http://art-of-lol.com/wp-content/uploads/2015/12/ezreal_by_cglas-d8smd2g.jpg" />
<img class="img-responsive" src="http://pre14.deviantart.net/81ae/th/pre/i/2015/345/5/c/ezreal_by_tanzenkat-d9jrcvc.jpg" />
</div>