CSS3跑马灯效果，无空格

Question

这个问题在这里有一个答案，它在跑马灯的每次迭代结束时留下了很多空白空间： CSS3 Marquee Effect

有没有办法实现平滑的 <marquee></marquee> 效果，使用CSS3，不留这个空间？

我有很多小元素，看起来有点像 SO 的蓝色标签，专门填充选取框的内容，而不是一个连续的主体或一堵文本墙。

原文由 Lucien 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这是一个示例，您可以如何操作，并通过设置延迟和持续时间来控制文本之间的空间

 .marquee {
  background-color: #ddd;
  width: 500px;
  margin: 0 auto;
  overflow: hidden;
  white-space: nowrap;
}
.marquee span {
  display: inline-block;
  font-size: 20px;
  position: relative;
  left: 100%;
  animation: marquee 8s linear infinite;
}
.marquee:hover span {
  animation-play-state: paused;
}

.marquee span:nth-child(1) {
  animation-delay: 0s;
}
.marquee span:nth-child(2) {
  animation-delay: 0.8s;
}
.marquee span:nth-child(3) {
  animation-delay: 1.6s;
}
.marquee span:nth-child(4) {
  animation-delay: 2.4s;
}
.marquee span:nth-child(5) {
  animation-delay: 3.2s;
}

@keyframes marquee {
  0%   { left: 100%; }
  100% { left: -100%; }
}

 <p class="marquee">
  <span>this is a</span>
  <span>simple marquee</span>
  <span>using css</span>
  <span>only tech</span>
  <span>with a delay</span>
</p>

原文由 Asons 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

CSS3跑马灯效果，无空格

Horizontal Marquee

---

水平 一 右 一 左： https ://codepen.io/Rayeesac/pen/JjGEYRZ

 Vertical Marquee

---

垂直 一 顶 一 底： https ://codepen.io/Rayeesac/pen/eYJgpVy

原文由 Rayees AC 发布，翻译遵循 CC BY-SA 4.0 许可协议