Question

我在之前的代码中使用了相同的@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>

Answer 1

您遇到问题的主要原因是您使用的left属性是指未在position: absolute;课程中设置.showcase的事实。

修复完毕后，您需要处理z-index内的@keyframes slide财产

SlideShow无法正常工作

1 个答案: