幻灯片动画错误
幻灯片动画错误
提问于 2020-07-19 12:02:36
我在我的页面上有幻灯片，但我在动画中有一个小bug，我找不到它。我根据本教程使用幻灯片：https://www.youtube.com/watch?v=TzAshjkhFQw。但是我想要只有3张幻灯片，而不是4张。前3张幻灯片是可以的，但是第四张幻灯片的背景是空的。我只想要3张幻灯片，然后重复播放幻灯片。
/* Slider */
.slider {
display: block;
height: 100%;
width: 100%;
z-index: -1;
background-color: #1f1f1f;
overflow: hidden;
position: absolute;
top: 0px;
right: 0px;
border-bottom: 10px solid rgb(121, 0, 0);
}
.slider > * {
position: absolute;
display: block;
width: 100%;
height: 100%;
background-color: #1f1f1f;
animation: slide 12s infinite;
overflow: hidden;
}
.slide:nth-child(1) {
left: 0%;
animation-delay: -1s;
background-image: url(img/slide1.jpg);
background-size: cover;
background-position: center;
}
.slide:nth-child(2) {
left: 100%;
animation-delay: 2s;
background-image: url(img/slide2.png);
background-size: cover;
background-position: center;
}
.slide:nth-child(3) {
left: 100%;
animation-delay: 5s;
background-image: url(img/slide3.jpg);
background-size: cover;
background-position: center;
}
.slide p {
font-size: 2rem;
text-align: center;
display: inline-block;
width: 100%;
margin-top: 340px;
color: #fff;
}
@keyframes slide {
0% { left: 100%; width: 100%; opacity: 1;}
5% { left: 0%;}
25% { left: 0%;}
30% { left: -100%; width: 100%; opacity: 1;}
30.0001% { left: -100%; width: 0%; opacity: 0;}
100% { left: 100%; width: 0%; opacity: 0;}
}<div class="slider">
<div class="slide">
<p>Slide1</p>
</div>
<div class="slide">
<p>Slide2</p>
</div>
<div class="slide">
<p>Slide3</p>
</div>
</div>
提前感谢您的建议！
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-07-19 13:43:47
您需要更改动画中的百分比以及各个幻灯片上的计时
@keyframes slide {
0% { left: 100%; width: 100%; opacity: 1;}
6.667% { left: 0%;}
33.334% { left: 0%;}
40% { left: -100%; width: 100%; opacity: 1;}
40.0001% { left: -100%; width: 0%; opacity: 0;}
100% { left: 100%; width: 0%; opacity: 1;}
}
.slide:nth-child(2) {
animation-delay: 3s;
}
.slide:nth-child(3) {
animation-delay: 7s;
}该动画最初设计为12秒内的4张幻灯片，即每3秒一张幻灯片。如果要将其更改为每4秒一张幻灯片，则需要进一步分隔动画(更改动画延迟)，并更改动画以使幻灯片在更长时间内可见(将每个百分比乘以4/3)。
然而，这种动画幻灯片的方式似乎真的很不灵活，所以你可能想看看其他的方法，这样你就可以更容易地添加或删除幻灯片。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62980035
复制
相似问题
绘制带边框的线条
Java绘制带边框的线条
画布中带渐变的线条绘制
在画布android中绘制带边框的文本
使用画布绘制线条
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
