Question

我正在尝试使用NAV按钮创建一个纯CSS自动动画滑块。如果单独使用，则滑块动画和导航效果会很好，但是当我将它们组合在一起时，自动动画将取代导航系统，并且无法使用导航按钮在幻灯片之间移动。如何停止动画使导航不至于压倒一切，以便我可以在幻灯片之间移动，同时仍然保持自动滚动条？这是我的代码

.slider {
  width: 100%;
  height: 300px;
  overflow: hidden;
}

figure p {
  position: absolute;
}

figure {
  position: relative;
  width: 400%;
  margin: 0;
  left: 0;
  text-align: center;
  transition: left 2s;
  animation: 20s slidy infinite;
}

.slider figure .slide {
  width: 25%;
  float: left;
}

.slider figure img {
  width: 100%;
  height: 300px;
}

.button_container {
  position: relative;
  top: -30px;
  text-align: center;
}

.slider_button {
  display: inline-block;
  height: 15px;
  width: 15px;
  border-radius: 50%;
  background-color: black;
  margin: 0px 15px;
}

#slide-1:target~.slide_container {
  left: 0%;
}

#slide-2:target~.slide_container {
  left: -100%;
}

#slide-3:target~.slide_container {
  left: -200%;
}

#slide-4:target~.slide_container {
  left: -300%;
}

@keyframes slidy {
  0% {
    left: 0%;
  }
  21% {
    left: 0%;
  }
  25% {
    left: -100%;
  }
  46% {
    left: -100%;
  }
  50% {
    left: -200%;
  }
  71% {
    left: -200%;
  }
  75% {
    left: -300%;
  }
  96% {
    left: -300%;
  }
  100% {
    left: 0%;
  }
}

<div class="slider">
  <span id="slide-1"></span>
  <span id="slide-2"></span>
  <span id="slide-3"></span>
  <span id="slide-4"></span>

  <figure class="slide_container">
    <div class="slide">
      <p>Test1</p>
      <img src="https://via.placeholder.com/300?text=1" class="slider_image">
    </div>

    <div class="slide">
      <p>Test2</p>
      <img src="https://via.placeholder.com/300?text=2" class="slider_image">
    </div>

    <div class="slide">
      <p>Test3</p>
      <img src="https://via.placeholder.com/300?text=3" class="slider_image">
    </div>

    <div class="slide">
      <p>Test4</p>
      <img src="https://via.placeholder.com/300?text=4" class="slider_image">
    </div>

  </figure>

  <div class="button_container">
    <a href="#slide-1" class="slider_button"></a>
    <a href="#slide-2" class="slider_button"></a>
    <a href="#slide-3" class="slider_button"></a>
    <a href="#slide-4" class="slider_button"></a>
  </div>


</div>

Answer 1

根据想法，是将同一动画定义4次，然后单击以激活所需的动画，并延迟显示目标图像，然后滑块将继续自动运行。但是更改图像时您将不会有过渡。不确定您的配置是否可行。

.slider {
  width: 100%;
  height: 300px;
  overflow: hidden;
}

figure p {
  position: absolute;
}

figure {
  position: relative;
  width: 400%;
  margin: 0;
  left: 0;
  text-align: center;
  transition: left 2s;
  animation: 10s slidy infinite;
}

.slider figure .slide {
  width: 25%;
  float: left;
}

.slider figure img {
  width: 100%;
  height: 300px;
}

.button_container {
  position: relative;
  top: -30px;
  text-align: center;
}

.slider_button {
  display: inline-block;
  height: 15px;
  width: 15px;
  border-radius: 50%;
  background-color: black;
  margin: 0px 15px;
}

#slide-1:target~.slide_container {
  animation: 10s slidy1 infinite;
}

#slide-2:target~.slide_container {
  animation: 10s slidy2 infinite -2.5s;
}

#slide-3:target~.slide_container {
  animation: 10s slidy3 infinite -5s;
}

#slide-4:target~.slide_container {
  animation: 10s slidy4 infinite -7.5s;
}

@keyframes slidy {
  0%,21%,100% {left: 0%;}
  25%,46% {left: -100%;}
  50%,71% {left: -200%;}
  75%,96% {left: -300%;}
}
@keyframes slidy1 {
  0%,21%,100% {left: 0%;}
  25%,46% {left: -100%;}
  50%,71% {left: -200%;}
  75%,96% {left: -300%;}
}
@keyframes slidy2 {
  0%,21%,100% {left: 0%;}
  25%,46% {left: -100%;}
  50%,71% {left: -200%;}
  75%,96% {left: -300%;}
}
@keyframes slidy3 {
  0%,21%,100% {left: 0%;}
  25%,46% {left: -100%;}
  50%,71% {left: -200%;}
  75%,96% {left: -300%;}
}
@keyframes slidy4 {
  0%,21%,100% {left: 0%;}
  25%,46% {left: -100%;}
  50%,71% {left: -200%;}
  75%,96% {left: -300%;}
}

<div class="slider">
  <span id="slide-1"></span>
  <span id="slide-2"></span>
  <span id="slide-3"></span>
  <span id="slide-4"></span>

  <figure class="slide_container">
    <div class="slide">
      <p>Test1</p>
      <img src="https://via.placeholder.com/300?text=1" class="slider_image">
    </div>

    <div class="slide">
      <p>Test2</p>
      <img src="https://via.placeholder.com/300?text=2" class="slider_image">
    </div>

    <div class="slide">
      <p>Test3</p>
      <img src="https://via.placeholder.com/300?text=3" class="slider_image">
    </div>

    <div class="slide">
      <p>Test4</p>
      <img src="https://via.placeholder.com/300?text=4" class="slider_image">
    </div>

  </figure>

  <div class="button_container">
    <a href="#slide-1" class="slider_button"></a>
    <a href="#slide-2" class="slider_button"></a>
    <a href="#slide-3" class="slider_button"></a>
    <a href="#slide-4" class="slider_button"></a>
  </div>


</div>

Answer 2

@TemaniAfif击败了我！
还是我做了腿上的工作来使其正常工作，所以这里是具有5个关键帧的工作片段（默认为1个，每个幻灯片经过重组后的变换为1个）工作）。尽管正如Termani所说，切换动画时没有过渡）：

.slider {
  width: 100%;
  height: 300px;
  overflow: hidden;
}

figure p {
  position: absolute;
}

figure {
  position: relative;
  width: 400%;
  margin: 0;
  left: 0;
  text-align: center;
  transition: transform 2s;
  animation: 10s slidy infinite;
}

.slider figure .slide {
  width: 25%;
  float: left;
}

.slider figure img {
  width: 100%;
  height: 300px;
}

.button_container {
  position: relative;
  top: -30px;
  text-align: center;
}

.slider_button {
  display: inline-block;
  height: 15px;
  width: 15px;
  border-radius: 50%;
  background-color: black;
  margin: 0px 15px;
}

#slide-1:target~.slide_container {
  animation: 10s slidy1 infinite;
}

#slide-2:target~.slide_container {
  animation: 10s slidy2 infinite;
}

#slide-3:target~.slide_container {
  animation: 10s slidy3 infinite;
}

#slide-4:target~.slide_container {
  animation: 10s slidy4 infinite;
}

@keyframes slidy {
  0% {
    transform: translateX(0);
  }
  21% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-25%);
  }
  46% {
    transform: translateX(-25%);
  }
  50% {
    transform: translateX(-50%);
  }
  71% {
    transform: translateX(-50%);
  }
  75% {
    transform: translateX(-75%);
  }
  96% {
    transform: translateX(-75%);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes slidy1 {
  0% {
    transform: translateX(0);
  }
  21% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-25%);
  }
  46% {
    transform: translateX(-25%);
  }
  50% {
    transform: translateX(-50%);
  }
  71% {
    transform: translateX(-50%);
  }
  75% {
    transform: translateX(-75%);
  }
  96% {
    transform: translateX(-75%);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes slidy2 {
  0% {
    transform: translateX(-25%);
  }
  21% {
    transform: translateX(-25%);
  }
  25% {
    transform: translateX(-50%);
  }
  46% {
    transform: translateX(-50%);
  }
  50% {
    transform: translateX(-75%);
  }
  71% {
    transform: translateX(-75%);
  }
  75% {
    transform: translateX(0);
  }
  96% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-25%);
  }
}

@keyframes slidy3 {
  0% {
    transform: translateX(-50%);
  }
  21% {
    transform: translateX(-50%);
  }
  25% {
    transform: translateX(-75%);
  }
  46% {
    transform: translateX(-75%);
  }
  50% {
    transform: translateX(-0%);
  }
  71% {
    transform: translateX(-0%);
  }
  75% {
    transform: translateX(-25%);
  }
  96% {
    transform: translateX(-25%);
  }
  100% {
    transform: translateX(-50%);
  }
}

@keyframes slidy4 {
  0% {
    transform: translateX(-75%);
  }
  21% {
    transform: translateX(-75%);
  }
  25% {
    transform: translateX(0);
  }
  46% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-25%);
  }
  71% {
    transform: translateX(-25%);
  }
  75% {
    transform: translateX(-50%);
  }
  96% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(-75%);
  }
}

<div class="slider">
  <span id="slide-1"></span>
  <span id="slide-2"></span>
  <span id="slide-3"></span>
  <span id="slide-4"></span>


  <figure class="slide_container">
    <div class="slide">
      <p>Test1</p>
      <img src="https://via.placeholder.com/300?text=1" class="slider_image">
    </div>

    <div class="slide">
      <p>Test2</p>
      <img src="https://via.placeholder.com/300?text=2" class="slider_image">
    </div>

    <div class="slide">
      <p>Test3</p>
      <img src="https://via.placeholder.com/300?text=3" class="slider_image">
    </div>

    <div class="slide">
      <p>Test4</p>
      <img src="https://via.placeholder.com/300?text=4" class="slider_image">
    </div>

  </figure>

  <div class="button_container">
    <a href="#slide-1" class="slider_button"></a>
    <a href="#slide-2" class="slider_button"></a>
    <a href="#slide-3" class="slider_button"></a>
    <a href="#slide-4" class="slider_button"></a>
  </div>


</div>

这也不是完美的，因为例如当您单击“ 1”按钮并重新启动动画（2、3、4 ..）时，如果再次单击“ 1” ..则不会发生任何事情（因为它没有't切换动画）。

如何覆盖CSS滑块动画-具有NAV的纯CSS滑块？

2 个答案: