选框不会滚动所有内容

Question

我有一个客户正在使用字幕，我知道，我知道这是一个贬值的标签，坦率地说不应该使用。这是他的个人网站，他已经是我的客户有一段时间了，所以我想我应该实现选框，但以现代方式实现，而不使用折旧标签。我见过很多不同的解决方案。我通常使用 Flexbox 来做这样的事情，因为它不依赖于 javascript 或 jQuery，但 Flexbox 选框示例通常依赖于硬编码宽度来计算关键帧动画的速度。

所以，长话短说，我正在寻求创建一个响应式的选框，但速度不会根据滚动的内容量而改变（我知道这有很多要求）。我的客户也写了大量的内容（我试图说服他，但他仍然这样做）。

我将一些非常接近解决方案的东西放在一起。它不使用flexbox，但它可以很好地调整大小而不改变速度......我已经非常接近我所追求的了。归根结底，我不必使用 Flexbox，所以如果选中所有其他框，我就可以了！

这是我正在使用的代码：

<div class="pizza">
    <p class="duck"><span class="red">Start Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut sed placeat aperiam quod nostrum itaque blanditiis soluta! Aliquid fuga molestias aut magni, pariatur doloremque, voluptas ipsa nobis ipsum voluptatibus end.</span> <span class="green">Start Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut sed placeat aperiam quod nostrum itaque blanditiis soluta! Aliquid fuga molestias aut magni, pariatur doloremque, voluptas ipsa nobis ipsum voluptatibus end.</span> <span class="blue">Start Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut sed placeat aperiam quod nostrum itaque blanditiis soluta! Aliquid fuga molestias aut magni, pariatur doloremque, voluptas ipsa nobis ipsum voluptatibus end.</span>.</p>
</div>

CSS：

.green {
    color: green;
}

.red {
    color: red;
}

.blue {
    color: blue;
}

.pizza {
    line-height: 60px;
    font-size: 16px;
    overflow: hidden;
    position: relative;
    white-space: nowrap;
}

p.duck {
  animation: scroll-left 20s linear infinite;
}

@keyframes scroll-left {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-100%, 0);
  }
}

p.duck:hover {
    animation-play-state: paused;
}

小提琴：https://jsfiddle.net/L7kbhyg6/

我添加了一些跨度，以便更容易看到问题，但基本上并非所有文本都在滚动。我看到红色，然后是绿色，然后选框跳动，然后又重新开始。不知道如何让它显示我的所有内容。

谢谢，
乔什

Answer 1

只需给它一个特定的

width

，然后将

translateZ

值增加到

-300%

，然后调整动画的速度（例如40秒）。您可以调整这些值，如下所示：

.green {
    color: green;
}

.red {
    color: red;
}

.blue {
    color: blue;
}

.pizza {
    line-height: 60px;
    font-size: 16px;
    overflow: hidden;
    position: relative;
    white-space: nowrap;
    width: 1430px
}

p.duck {
  animation: scroll-left 40s linear infinite;
}

@keyframes scroll-left {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-300%, 0);
  }
}

p.duck:hover {
    animation-play-state: paused;
}

<div class="pizza">
    <p class="duck"><span class="red">Start Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut sed placeat aperiam quod nostrum itaque blanditiis soluta! Aliquid fuga molestias aut magni, pariatur doloremque, voluptas ipsa nobis ipsum voluptatibus end.</span> <span class="green">Start Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut sed placeat aperiam quod nostrum itaque blanditiis soluta! Aliquid fuga molestias aut magni, pariatur doloremque, voluptas ipsa nobis ipsum voluptatibus end.</span> <span class="blue">Start Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut sed placeat aperiam quod nostrum itaque blanditiis soluta! Aliquid fuga molestias aut magni, pariatur doloremque, voluptas ipsa nobis ipsum voluptatibus end.</span>.</p>
</div>