我一直试图将仅更改CSS的背景图像应用于div,但是由于某些原因,在指定的三张图像的末尾,出现一段背景,背景只是原始的黑色背景色。更奇怪的是,如果我将转换时间切换为4秒,则其中一张图像根本不会显示。有没有人有办法解决吗?该页面可以在这里找到(链接已删除)
CSS:* {padding:0; 边距:0}
body {
background-color: #000000;
}
.crossfade > figure {
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: absolute;
top: 0px;
width: 100%;
z-index: 0;
}
.crossfade > figure:nth-child(1) {
background-image: url('assets/img/landing/gym_1.jpg');
}
.crossfade > figure:nth-child(2) {
animation-delay: 6s;
background-image: url('assets/img/landing/gym_2.jpg');
}
.crossfade > figure:nth-child(3) {
animation-delay: 12s;
background-image: url('assets/img/landing/weights.jpg');
}
@keyframes imageAnimation {
0% {
animation-timing-function: ease-in;
opacity: 0;
}
8% {
animation-timing-function: ease-out;
opacity: 1;
}
17% {
opacity: 1
}
25% {
opacity: 0
}
100% {
opacity: 0
}
}
HTML:
<div class="crossfade">
<figure></figure>
<figure></figure>
<figure></figure>
我以为是你的时机。
动画持续30秒钟,而在那段时间的75%内,图像opacity: 0
没有过渡。也就是说,在19.5秒(延迟为25%+ 12秒figure:nth-child(3)
)之后,接下来的10.5秒将看不到任何动画,直到动画再次开始播放figure:nth-child(1)
。
更改它以便所有值都为三分之二应该整理一下(例如,有66%的时间opacity: 0
并更新延迟时间为10s
或持续时间为18s
)。或者,您可以设置4figures
并将延迟更改为的倍数7.5
。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句