文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >如何覆盖CSS滑块动画--纯CSS滑块与NAV？

问如何覆盖CSS滑块动画--纯CSS滑块与NAV？
EN

Stack Overflow用户
提问于 2019-08-20 15:23:03
回答 2查看 164关注 0票数 4

我正在尝试创建一个纯CSS自动动画滑块与导航按钮。如果滑块动画和导航单独运行，效果会很好，但当我将它们组合在一起时，自动动画就会取代导航系统，而且我不能使用导航按钮在幻灯片之间移动。我如何才能阻止动画过多的导航，以便我可以在幻灯片之间移动，同时仍然保留自动滚动条？这是我的代码

​

代码语言：javascript
复制
.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%;
  }
}
代码语言：javascript
复制
<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>

​

css-animations
html
css
slider
EN

回答 2

Stack Overflow用户

发布于 2019-08-20 17:39:11

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

​

代码语言：javascript
复制
.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%;}
}
代码语言：javascript
复制
<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
EN

Stack Overflow用户

发布于 2019-08-20 17:51:11

@TemaniAfif抢先一步！

尽管如此，我还是做了一些简单的工作来让它发挥作用，所以这里是5个关键帧的工作代码片段(1个是默认的，1个是每个幻灯片的1个，经过重新组织的变换使其工作)。尽管正如Termani所说，在切换动画时没有过渡)：

​

代码语言：javascript
复制
.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%);
  }
}
代码语言：javascript
复制
<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”。什么都不会发生(因为它不会切换动画)。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/57568553

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档