html - 为什么我的 slider 堆叠在一起？ slider 新手

Question

我是 slider 的新手，如果我的代码看起来很奇怪，我深表歉意。您能告诉我为什么我的 slider 堆叠在一起而不是像往常一样向左滑动吗？

@keyframes slide {
     0% { left: 0%; }
    20% { left: 0%; }
    35% { left: -100%; }
    45% { left: -100%; }
    50% { left: -200%; }
    70% { left: -200%; }
    75% { left: -300%; }
    95% { left: -300%; }
    100% { left: 0%; }
}

.slider{
    width: 100%;
    height: 480px;
}

.slider .slideimg{
    width: 100%;
    height: 480px;
    position: absolute;
    animation: 30s slide infinite;
    overflow: hidden;
}

.slideimg:nth-child(1){
    background-image: url(../images/homeimages/Terminator-Dark-Fate-Banner.jpg);
    background-size: cover;
    background-position: center;
}

.slideimg:nth-child(2){
    background-image: url(../images/homeimages/alladin.jpg);
    background-size: cover;
    background-position: center;
}

.slideimg:nth-child(3){
    background-image: url(../images/homeimages/frozen-ii-2020.png);
    background-size: cover;
    background-position: top;
}


.slider .slideimg:hover, 
.sliderbtn a:hover, .sliderbtn a:visited:hover {
    animation-play-state: paused;
}

<!--- Slider---->
    
    
               <div class="slider">
                   <div class="slideimg">
                        <div class="slidetitle">
                           <h1>Terminator: Dark Fate</h1>
                           <p>Subheader Infor</p>
                           <p class="sliderbtn"><a href="#">Get Ticket</a></p>
                           <p class="sliderbtn"><a href="#">View Trailer</a></p>
                       </div>
                    </div>
                  
                   <div class="slideimg">
                       <div class="slidetitle">
                           <h1>Aladin</h1>
                           <p>Subheader Infor</p>
                           <p class="sliderbtn"><a href="#">Get Ticket</a></p>
                           <p class="sliderbtn"><a href="#">View Trailer</a></p>
                       </div>
                    </div>
    
                   <div class="slideimg">
                       <div class="slidetitle">
                           <h1>Frozen: 2</h1>
                           <p>Subheader Infor</p>
                           <p class="sliderbtn"><a href="#">Get Ticket</a></p>
                           <p class="sliderbtn"><a href="#">View Trailer</a></p>
                       </div>
                    </div>
                   
                    <div class="slideimg">
                        <div class="slidetitle">
                           <h1>Terminator: Dark Fate</h1>
                           <p>Subheader Infor</p>
                           <p class="sliderbtn"><a href="#">Get Ticket</a></p>
                           <p class="sliderbtn"><a href="#">View Trailer</a></p>
                       </div>
                    </div>
                 </div>
    

Answer 1

我附上代码。请审查它。如果有任何变化，请告诉我。

这是链接:

https://jsfiddle.net/k4gu0t7v/16/

* {
  padding: 0;
  margin: 0
}

body {
  background-color: #000000;
}

.crossfade>figure {
  animation: imageAnimation 24s 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('https://picsum.photos/id/1000/1000/500');
}

.crossfade>figure:nth-child(2) {
  animation-delay: 6s;
  background-image: url('https://picsum.photos/id/1001/1000/500');
}

.crossfade>figure:nth-child(3) {
  animation-delay: 12s;
  background-image: url('https://picsum.photos/id/1075/1000/500');
}

.crossfade>figure:nth-child(4) {
  animation-delay: 18s;
  background-image: url('https://picsum.photos/id/1076/1000/500');
}

@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
  }

}

.slidetitle {
  padding: 20px;
}

.slidetitle h1 {
  font-size: 40px;
  color: #000
}

.slidetitle p {
  font-size: 20px;
  color: #444
}
.slide-button{
  margin-top:20px;
  display:flex;
}
.sliderbtn{
  margin-right:15px;
}
.sliderbtn{
  border:2px solid #444;
  padding:6px 12px;
  cursor:pointer;
}
.sliderbtn a{
  text-decoration:none;
}
.white{
  color:#fff !important;
}

<div class="crossfade">
  <!--1-->
  <figure>
    <div class="slidetitle">
      <h1>Terminator: Dark Fate</h1>
      <p>Subheader Infor</p>
      <div class="slide-button">
        <p class="sliderbtn"><a href="#">Get Ticket</a></p>
        <p class="sliderbtn"><a href="#">View Trailer</a></p>
      </div>
    </div>
  </figure>
  <!--2-->
  <figure>
    <div class="slidetitle">
      <h1>Aladin</h1>
      <p>Subheader Infor</p>
      <div class="slide-button">
        <p class="sliderbtn"><a href="#">Get Ticket</a></p>
        <p class="sliderbtn"><a href="#">View Trailer</a></p>
      </div>
    </div>
  </figure>
  <!--3-->
  <figure>
    <div class="slidetitle">
      <h1 class="white">Frozen: 2</h1>
      <p class="white">Subheader Infor</p>
      <div class="slide-button">
        <p class="sliderbtn"><a href="#">Get Ticket</a></p>
        <p class="sliderbtn"><a href="#">View Trailer</a></p>
      </div>
    </div>
  </figure>
  <!--4-->
  <figure>
    <div class="slidetitle">
      <h1>Terminator: Dark Fate</h1>
      <p>Subheader Infor</p>
      <div class="slide-button">
        <p class="sliderbtn"><a href="#">Get Ticket</a></p>
        <p class="sliderbtn"><a href="#">View Trailer</a></p>
      </div>
    </div>
  </figure>
</div>