Question

我有一张幻灯片，其中包含3张不同文字的图片，我想在最后一张照片上停止自动播放，因此最后一条消息/图片不会淡出并消失。这是代码：

HTML部分：

<div class="slide-container">    
<img class="slide1" src="images/1banner.jpg">
<img class="slide2" src="images/2banner.jpg">
<img class="slide3" src="images/3banner.jpg">
</div>

CSS部分：

 .slide-container {
position: relative;
float: right;
height: 150px;
width: 950px;
background: url('banner-back2.jpg');
}

.slide-container img {
position: absolute;
top: 0;
left: 0;
height: 150px;
width: 950px; 
opacity: 0;
}

.slide1 { -webkit-animation: fade 12s;}
.slide2 { -webkit-animation: fade 12s 4s;}
.slide3 { -webkit-animation: fade 12s 8s;}

@-webkit-keyframes fade {
0% { opacity: 0; }
10% { opacity: 1; }
20% { opacity: 1; }
30% { opacity: 0; }
100% { opacity: 0; }
}

Answer 1

您可以引入第二个淡入淡出动画，该动画保持可见并将其应用到最后一张幻灯片：

.slide-container {
position: relative;
float: right;
height: 150px;
width: 950px;
background: url('banner-back2.jpg');
}

.slide-container img {
position: absolute;
top: 0;
left: 0;
height: 150px;
width: 950px; 
opacity: 0;
}

.slide1 { -webkit-animation: fade 12s;}
.slide2 { -webkit-animation: fade 12s 4s;}
.slide3 { -webkit-animation: fade2 12s 8s; -webkit-animation-fill-mode:forwards; }

@-webkit-keyframes fade {
0% { opacity: 0; }
10% { opacity: 1; }
20% { opacity: 1; }
30% { opacity: 0; }
100% { opacity: 0; }
}
@-webkit-keyframes fade2 {
0% { opacity: 0; }
10% { opacity: 1; }
100% { opacity: 1; }
}

如何在最后一张图片上停止css图片幻灯片？

1 个答案: