CSS3字幕效果，无空白 [英] CSS3 Marquee Effect, Without Empty Space

问题描述

这里的问题有一个答案，在选取框的每次迭代结束时都会留下很多空白: CSS3字幕效果

This question here has an answer, which leaves a lot of empty space at the end of each iteration of the marquee: CSS3 Marquee Effect

有没有一种方法可以使用CSS3达到平滑的<marquee></marquee>效果，而不会留下这个空间?

Is there a way to achieve a smooth <marquee></marquee> effect, using CSS3, that doesn't leave this space?

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

I have a lot of small elements, which look a bit like SO's blue tags, that exclusively fill the content of the marquee, as opposed to one continuous body or a wall of text.

推荐答案

这里是一个示例，您可以通过设置延迟和持续时间来控制文本之间的间距

Here is a sample how you can do, and by setting the delay and duration you control the space between the texts

.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>

这篇关于CSS3字幕效果，无空白的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！