我在之前的代码中使用了相同的@keyframes
并且工作正常,不知道为什么这里工作不正常,幻灯片移动不顺畅以及第4个孩子展示在左边,是唯一一个覆盖width: 100%
:
body {margin: 0}
.top-container {
display: grid;
grid-template-areas:
'showcase showcase'
'showcase showcase';
}
.showcase {
grid-area: showcase;
min-height: 600px;
width: 100%;
padding: 3rem;
display: flex;
flex-direction: column;
align-items: start;
justify-content: center;
box-shadow: var(--shadow);
animation: slide 8s infinite;
}
.showcase h1 {
font-size: 4rem;
margin-bottom: 0;
color: var(--light);
}
.showcase:nth-child(1) {
animation-delay: -1s;
background-color: #333;
background-size: cover;
background-position: center;
}
.showcase:nth-child(2) {
animation-delay: 2s;
background-color: black;
background-size: cover;
background-position: center;
}
.showcase:nth-child(3) {
animation-delay: 5s;
background-color: bisque;
background-size: cover;
background-position: center;
}
.showcase:nth-child(4) {
animation-delay: 8s;
background-color: yellowgreen;
background-size: cover;
background-position: center;
}
@keyframes slide {
0% {left: 100%; width: 100%}
5% {left: 0%}
25% {left: 0%}
30% {left: -100%; width: 100%}
30.01% {left: -100%; width: 0%}
100% {left: 100%; width: 0%}
}
<section class="top-container">
<div class="showcase">1</div>
<div class="showcase">2</div>
<div class="showcase">3</div>
<div class="showcase">4</div>
</section>
答案 0 :(得分:-1)
您遇到问题的主要原因是您使用的left
属性是指未在position: absolute;
课程中设置.showcase
的事实。
修复完毕后,您需要处理z-index
内的@keyframes slide
财产