纯CSS3不断移动滑块

Question

我想用CSS3（以及后来的Sass）制作不断移动的滑块。 我有九个图像和掩模div，宽度为850px，我知道如何为第一个图像设置动画，但是如何为剩下的图像计算值。

我在Smashing Magazine和hugogiraudel.com上找到了很好的教程，但是有静态状态，我不知道如何让它继续移动。

如果有人可以帮助我理解这一点以及如何使用SASS，那将会很棒。

这是CodePen我做的事情。 这是代码：

＆＃13;

＆＃13;

#slider {
  width: 850px;
  margin: 0 150px;
}
.ruler {
  display: flex;
  flex-flow: row nowrap;
  border: 1px solid black;
}
.u10 {
  flex: 1 1 0;
  width: 10%;
  text-align: center;
  z-index: 0;
}
.u10:nth-child(even) {
  background-color: white;
}
.u10:nth-child(odd) {
  background-color: gray;
}
ul {
  list-style: outside none none;
  position: relative;
  height: 100px;
}
ul:after {
  border: 1px solid black;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  content: "";
}
li {
  position: absolute;
}
.img1 {
  left: -120px;
}
.img2 {
  left: 0px;
}
.img3 {
  left: 120px;
}
.img4 {
  left: 240px;
}
.img5 {
  left: 360px;
}
.img6 {
  left: 480px;
}
.img7 {
  left: 600px;
}
.img8 {
  left: 720px;
}
.img9 {
  left: 840px;
}
.animation {
  animation: 10s linear 0s infinite running cycle1;
}
@keyframes cycle1 {
  0% {
    left: -120px;
    opacity: 0;
  }
  1% {
    left: -120px;
    opacity: 1;
  }
  99% {
    left: 840px;
    opacity: 1;
  }
  100% {
    left: -120px;
    opacity: 0;
  }
}

＆＃13;

<div id="slider">
  <div class="ruler">
    <span class="u10">10%</span>
    <span class="u10">20%</span>
    <span class="u10">30%</span>
    <span class="u10">40%</span>
    <span class="u10">50%</span>
    <span class="u10">60%</span>
    <span class="u10">70%</span>
    <span class="u10">80%</span>
    <span class="u10">90%</span>
    <span class="u10">100%</span>
  </div>
  <ul>
    <li class="image-wrapper img1">
      <img src="http://placehold.it/100?text=1" alt="">
    </li>
    <li class="image-wrapper img2">
      <img src="http://placehold.it/100?text=2" alt="">
    </li>
    <li class="image-wrapper img3">
      <img src="http://placehold.it/100?text=3" alt="">
    </li>
    <li class="image-wrapper img4">
      <img src="http://placehold.it/100?text=4" alt="">
    </li>
    <li class="image-wrapper img5">
      <img src="http://placehold.it/100?text=5" alt="">
    </li>
    <li class="image-wrapper img6">
      <img src="http://placehold.it/100?text=6" alt="">
    </li>
    <li class="image-wrapper img7">
      <img src="http://placehold.it/100?text=7" alt="">
    </li>
    <li class="image-wrapper img8">
      <img src="http://placehold.it/100?text=8" alt="">
    </li>
    <li class="image-wrapper img9">
      <img src="http://placehold.it/100?text=9" alt="">
    </li>
  </ul>
  <ul>
    <li class="image-wrapper img1 animation">
      <img src="http://placehold.it/100?text=1" alt="">
    </li>

  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

要制作不断移动的滑块动画，请不要为每个图像元素指定不同的位置。相反，将它们放在父元素之外的相同位置，然后在下面的代码段中为它们中的每一个提供逐渐不同的animation-delay。给每个图像元素一个不同的起始位置意味着每个图像元素需要提供不同的持续时间，因为速度必须不同（因为它必须从左到右覆盖的像素数量很高）。

由于在任何时间点容器内总共有9个图像，因此每个单独图像元素的延迟应等于(animation-duration/9) * (n-1)，其中n为否。元素。为简单起见，我将animation-duration修改为9s，因此对于第一个图像，animation-delay将为0，而第二个图像将为1，依此类推。

＆＃13;

＆＃13;

#slider {
  width: 850px;
  margin: 0 150px;
}
.ruler {
  display: flex;
  flex-flow: row nowrap;
  border: 1px solid black;
}
.u10 {
  flex: 1 1 0;
  width: 10%;
  text-align: center;
  z-index: 0;
}
.u10:nth-child(even) {
  background-color: white;
}
.u10:nth-child(odd) {
  background-color: gray;
}
ul {
  list-style: outside none none;
  position: relative;
  height: 100px;
}
ul:after {
  border: 1px solid black;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  content: "";
}
li {
  position: absolute;
}
.img1 {
  left: -120px;
}
.img2 {
  left: 0px;
}
.img3 {
  left: 120px;
}
.img4 {
  left: 240px;
}
.img5 {
  left: 360px;
}
.img6 {
  left: 480px;
}
.img7 {
  left: 600px;
}
.img8 {
  left: 720px;
}
.img9 {
  left: 840px;
}
.animation {
  animation: 9s linear 0s infinite running cycle1;
}
@keyframes cycle1 {
  0% {
    left: -120px;
    opacity: 0;
  }
  1% {
    left: -120px;
    opacity: 1;
  }
  99% {
    left: 850px;
    opacity: 1;
  }
  100% {
    left: -120px;
    opacity: 0;
  }
}
.animation[class*='img'] {
  left: -120px;
}
.animation.img2 {
  animation-delay: 1s;
}
.animation.img3 {
  animation-delay: 2s;
}
.animation.img4 {
  animation-delay: 3s;
}
.animation.img5 {
  animation-delay: 4s;
}
.animation.img6 {
  animation-delay: 5s;
}
.animation.img7 {
  animation-delay: 6s;
}
.animation.img8 {
  animation-delay: 7s;
}
.animation.img9 {
  animation-delay: 8s;
}
ul.overflow-hidden {
  overflow: hidden;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div id="slider">
  <div class="ruler">
    <span class="u10">10%</span>
    <span class="u10">20%</span>
    <span class="u10">30%</span>
    <span class="u10">40%</span>
    <span class="u10">50%</span>
    <span class="u10">60%</span>
    <span class="u10">70%</span>
    <span class="u10">80%</span>
    <span class="u10">90%</span>
    <span class="u10">100%</span>
  </div>
  <h3>Without animation</h3>
  <ul>
    <li class="image-wrapper img1">
      <img src="http://placehold.it/100?text=1" alt="">
    </li>
    <li class="image-wrapper img2">
      <img src="http://placehold.it/100?text=2" alt="">
    </li>
    <li class="image-wrapper img3">
      <img src="http://placehold.it/100?text=3" alt="">
    </li>
    <li class="image-wrapper img4">
      <img src="http://placehold.it/100?text=4" alt="">
    </li>
    <li class="image-wrapper img5">
      <img src="http://placehold.it/100?text=5" alt="">
    </li>
    <li class="image-wrapper img6">
      <img src="http://placehold.it/100?text=6" alt="">
    </li>
    <li class="image-wrapper img7">
      <img src="http://placehold.it/100?text=7" alt="">
    </li>
    <li class="image-wrapper img8">
      <img src="http://placehold.it/100?text=8" alt="">
    </li>
    <li class="image-wrapper img9">
      <img src="http://placehold.it/100?text=9" alt="">
    </li>
  </ul>
  <h3>With the portions outside the container visible</h3>
  <ul>
    <li class="image-wrapper img1 animation">
      <img src="http://placehold.it/100?text=1" alt="">
    </li>
    <li class="image-wrapper img2 animation">
      <img src="http://placehold.it/100?text=2" alt="">
    </li>
    <li class="image-wrapper img3 animation">
      <img src="http://placehold.it/100?text=3" alt="">
    </li>
    <li class="image-wrapper img4 animation">
      <img src="http://placehold.it/100?text=4" alt="">
    </li>
    <li class="image-wrapper img5 animation">
      <img src="http://placehold.it/100?text=5" alt="">
    </li>
    <li class="image-wrapper img6 animation">
      <img src="http://placehold.it/100?text=6" alt="">
    </li>
    <li class="image-wrapper img7 animation">
      <img src="http://placehold.it/100?text=7" alt="">
    </li>
    <li class="image-wrapper img8 animation">
      <img src="http://placehold.it/100?text=8" alt="">
    </li>
    <li class="image-wrapper img9 animation">
      <img src="http://placehold.it/100?text=9" alt="">
    </li>
  </ul>
  <h3>With the portions outside the container hidden</h3>
  <ul class='overflow-hidden'>
    <li class="image-wrapper img1 animation">
      <img src="http://placehold.it/100?text=1" alt="">
    </li>
    <li class="image-wrapper img2 animation">
      <img src="http://placehold.it/100?text=2" alt="">
    </li>
    <li class="image-wrapper img3 animation">
      <img src="http://placehold.it/100?text=3" alt="">
    </li>
    <li class="image-wrapper img4 animation">
      <img src="http://placehold.it/100?text=4" alt="">
    </li>
    <li class="image-wrapper img5 animation">
      <img src="http://placehold.it/100?text=5" alt="">
    </li>
    <li class="image-wrapper img6 animation">
      <img src="http://placehold.it/100?text=6" alt="">
    </li>
    <li class="image-wrapper img7 animation">
      <img src="http://placehold.it/100?text=7" alt="">
    </li>
    <li class="image-wrapper img8 animation">
      <img src="http://placehold.it/100?text=8" alt="">
    </li>
    <li class="image-wrapper img9 animation">
      <img src="http://placehold.it/100?text=9" alt="">
    </li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

如果您希望图像在开头本身的容器中可见（而不是在开始时的空容器），那么在不添加额外元素的情况下很难实现它。您可以使用与上面提到的相同的方法，添加一个额外的虚拟包装器，其中包含所有9个图像，并仅将其设置为动画一次，使其位于真实动画之前。下面的代码段有一个这种方法的样本。

＆＃13;

＆＃13;

#slider {
  width: 850px;
  margin: 0 150px;
}
.ruler {
  display: flex;
  flex-flow: row nowrap;
  border: 1px solid black;
}
.u10 {
  flex: 1 1 0;
  width: 10%;
  text-align: center;
  z-index: 0;
}
.u10:nth-child(even) {
  background-color: white;
}
.u10:nth-child(odd) {
  background-color: gray;
}
ul {
  list-style: outside none none;
  position: relative;
  height: 100px;
  padding: 0px 0px;
}
ul:after {
  border: 1px solid black;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  content: "";
}
li {
  position: absolute;
}
.img1 {
  left: -120px;
}
.img2 {
  left: 0px;
}
.img3 {
  left: 120px;
}
.img4 {
  left: 240px;
}
.img5 {
  left: 360px;
}
.img6 {
  left: 480px;
}
.img7 {
  left: 600px;
}
.img8 {
  left: 720px;
}
.img9 {
  left: 840px;
}
.animation {
  animation: 9s linear 5s infinite running cycle1; /* small delay added for image to be loaded, this can be ignored if image is preloaded */
}
@keyframes cycle1 {
  0% {
    left: -100px;
    opacity: 0;
  }
  0.01% {
    left: -100px;
    opacity: 1;
  }
  99.99% {
    left: 854px; /* total distance to be covered to be same as width of the dummy wrapper */
    opacity: 1;
  }
  100% {
    left: -100px;
    opacity: 0;
  }
}
.animation[class*='img'] {
  left: -100px;
}
.animation.img1 {
  animation-delay: 6s;
}
.animation.img2 {
  animation-delay: 7s;
}
.animation.img3 {
  animation-delay: 8s;
}
.animation.img4 {
  animation-delay: 9s;
}
.animation.img5 {
  animation-delay: 10s;
}
.animation.img6 {
  animation-delay: 11s;
}
.animation.img7 {
  animation-delay: 12s;
}
.animation.img8 {
  animation-delay: 13s;
}
ul.overflow-hidden {
  overflow: hidden;
}
.image-dummy {
  position: absolute;
  left: -100px;
  width: 954px; /* 100px image width + 6px imaee margin * no. of images */
  animation: 9s linear dummy-move 1 forwards 5s;
  white-space: nowrap;
  margin: 0px;
}
.image-dummy img {
  float: left;
  margin-right: 6px;
}
@keyframes dummy-move {
  from {
    left: -100px;
  }
  to {
    left: 866px; /* rough calculation equal to width of container * (margin-right * 2) */
  }
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div id="slider">
  <div class="ruler">
    <span class="u10">10%</span>
    <span class="u10">20%</span>
    <span class="u10">30%</span>
    <span class="u10">40%</span>
    <span class="u10">50%</span>
    <span class="u10">60%</span>
    <span class="u10">70%</span>
    <span class="u10">80%</span>
    <span class="u10">90%</span>
    <span class="u10">100%</span>
  </div>
  <h3>Without animation</h3>
  <ul>
    <li class="image-wrapper img1">
      <img src="http://placehold.it/100?text=1" alt="">
    </li>
    <li class="image-wrapper img2">
      <img src="http://placehold.it/100?text=2" alt="">
    </li>
    <li class="image-wrapper img3">
      <img src="http://placehold.it/100?text=3" alt="">
    </li>
    <li class="image-wrapper img4">
      <img src="http://placehold.it/100?text=4" alt="">
    </li>
    <li class="image-wrapper img5">
      <img src="http://placehold.it/100?text=5" alt="">
    </li>
    <li class="image-wrapper img6">
      <img src="http://placehold.it/100?text=6" alt="">
    </li>
    <li class="image-wrapper img7">
      <img src="http://placehold.it/100?text=7" alt="">
    </li>
    <li class="image-wrapper img8">
      <img src="http://placehold.it/100?text=8" alt="">
    </li>
    <li class="image-wrapper img9">
      <img src="http://placehold.it/100?text=9" alt="">
    </li>
  </ul>
  <h3>With the portions outside the container visible</h3>
  <ul>
    <li class="image-wrapper img1 animation">
      <img src="http://placehold.it/100?text=1" alt="">
    </li>
    <li class="image-wrapper img2 animation">
      <img src="http://placehold.it/100?text=2" alt="">
    </li>
    <li class="image-wrapper img3 animation">
      <img src="http://placehold.it/100?text=3" alt="">
    </li>
    <li class="image-wrapper img4 animation">
      <img src="http://placehold.it/100?text=4" alt="">
    </li>
    <li class="image-wrapper img5 animation">
      <img src="http://placehold.it/100?text=5" alt="">
    </li>
    <li class="image-wrapper img6 animation">
      <img src="http://placehold.it/100?text=6" alt="">
    </li>
    <li class="image-wrapper img7 animation">
      <img src="http://placehold.it/100?text=7" alt="">
    </li>
    <li class="image-wrapper img8 animation">
      <img src="http://placehold.it/100?text=8" alt="">
    </li>
    <li class="image-wrapper img9 animation">
      <img src="http://placehold.it/100?text=9" alt="">
    </li>
  </ul>
  <h3>With the portions outside the container hidden</h3>
  <ul class='overflow-hidden'>
    <li class="image-wrapper img1 animation">
      <img src="http://placehold.it/100?text=1" alt="">
    </li>
    <li class="image-wrapper img2 animation">
      <img src="http://placehold.it/100?text=2" alt="">
    </li>
    <li class="image-wrapper img3 animation">
      <img src="http://placehold.it/100?text=3" alt="">
    </li>
    <li class="image-wrapper img4 animation">
      <img src="http://placehold.it/100?text=4" alt="">
    </li>
    <li class="image-wrapper img5 animation">
      <img src="http://placehold.it/100?text=5" alt="">
    </li>
    <li class="image-wrapper img6 animation">
      <img src="http://placehold.it/100?text=6" alt="">
    </li>
    <li class="image-wrapper img7 animation">
      <img src="http://placehold.it/100?text=7" alt="">
    </li>
    <li class="image-wrapper img8 animation">
      <img src="http://placehold.it/100?text=8" alt="">
    </li>
    <li class="image-wrapper img9 animation">
      <img src="http://placehold.it/100?text=9" alt="">
    </li>
    <li class='image-dummy'>
      <img src="http://placehold.it/100?text=9" alt="">
      <img src="http://placehold.it/100?text=8" alt="">
      <img src="http://placehold.it/100?text=7" alt="">
      <img src="http://placehold.it/100?text=6" alt="">
      <img src="http://placehold.it/100?text=5" alt="">
      <img src="http://placehold.it/100?text=4" alt="">
      <img src="http://placehold.it/100?text=3" alt="">
      <img src="http://placehold.it/100?text=2" alt="">
      <img src="http://placehold.it/100?text=1" alt="">
    </li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

这比调整您的方法产生这种效果更容易，因为您的方法需要9种不同的关键帧设置才能产生您需要的效果。