Question

我有一个div，有10个孩子，每个50px。 div的父级是210px，我怎么能让div从右到左连续滑动，以便在最后一个div的孩子出现后第一个？

这只能使用css吗？或者只使用javascript？

＆＃13;

.parent {
  width: 210px;
  background-color: lightgray;
  overflow: hidden
}

.slide {
  display: flex;
  width: 700px;
  animation: slide-left-coins 10s linear 2s infinite
}

.child {
  width: 50px;
  height: 50px;
  background-color: white;
  margin: 10px
}

@keyframes slide-left-coins {
  0% {
    transform: translate3d(0, 0, 0)
  }
  100% {
    transform: translate3d(-600px, 0, 0)
  }
}

＆＃13;

<div class="parent">
  <div class="slide">
    <div class="child">1</div>
    <div class="child">2</div>
    <div class="child">3</div>
    <div class="child">4</div>
    <div class="child">5</div>
    <div class="child">6</div>
    <div class="child">7</div>
    <div class="child">8</div>
    <div class="child">9</div>
    <div class="child">10</div>
  </div>
</div>

＆＃13;

Answer 1

虽然可以通过重复html来做到这一点，但最好只使用javascript。

但是对于那些仅css的硬核，这是我的方法：

.parent {
  width: 210px;
  background-color: lightgray;
  overflow: hidden
}

.slide {
  display: inline-flex;
  width: auto;
  animation: slide-left-coins 10s linear 2s infinite
}

.child {
  width: 50px;
  height: 50px;
  background-color: white;
  margin: 10px
}

@keyframes slide-left-coins {
  0% {
    transform: translateX(0)
  }
  100% {
    transform: translateX(-350px)
  }
}

<div class="parent">
  <div class="slide">
    <div class="child">1</div>
    <div class="child">2</div>
    <div class="child">3</div>
    <div class="child">4</div>
    <div class="child">5</div>
    <div class="child">1</div>
    <div class="child">2</div>
    <div class="child">3</div>
    <div class="child">4</div>
    <div class="child">5</div>
  </div>
</div>

要使此功能正常运行，我们需要知道幻灯片的宽度（在大多数情况下我们都知道，我们可以通过始终为它提供固定的宽度，或者如果我们知道它不会改变，那么几乎可以使其保持静态，然后得到它）。我是通过将孩子的总数乘以孩子的宽度（包括边距和其他会增加父母的宽度的东西）得到的：

child's width: 50px + child's margin: 20px (10 to each side) = 70px

所以每个孩子的宽度正好是70像素，现在将其乘以孩子的总数：

70px * 10 = 700px

这是幻灯片的宽度，现在我们除以：

700px / 2 = 350px

这是幻灯片必须移动的距离。从右到左，它必须是负数，所以最后我们得到：

translateX(-350px)

如果您使用的不是固定宽度，但是您知道内容不会改变，请转到检查器，然后在“布局”标签中获取幻灯片的宽度（请记住，宽度在不同浏览器中可能会有所不同，我确实使用了骇客选择器来解决该问题。

稍微解释一下它为什么起作用：translateX()需要宽度的一半，这样它将到达幻灯片的中间，这是内容（五个孩子）完全消失的地方，只有重复的内容可见，然后它又重新开始，而眼睛没有察觉。

这只是出于演示目的，如果您真的想执行此操作，则无需重复所有操作，只需重复一开始就可以看到的内容（这是真正需要的内容）。

使用css使div连续（线性）滑动

1 个答案: