CSS 滚动文本循环

Question

我正在尝试使用纯 CSS 进行连续滚动文本。

这是我试图滚动的 HTML：

<div class="marquee">
<div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas placerat maximus massa ut dictum. Sed eu est justo. Quisque pharetra vel tellus ac porttitor. Nunc luctus sollicitudin diam non dignissim. Phasellus mollis semper libero, nec rhoncus est tristique quis. Nulla eget pharetra nunc, sed faucibus felis. Curabitur nec posuere nisl. Quisque at vestibulum velit. Pellentesque sagittis lacus ut aliquet faucibus. Ut porta purus id mi tincidunt mollis. Integer vulputate, eros malesuada viverra rutrum, magna nisl vehicula nisi, nec pellentesque augue nunc vel felis. Sed consectetur lacinia quam et auctor. Cras nec ullamcorper orci. Vivamus id felis eu mauris tempor viverra eget in mi. Nam nibh risus, tincidunt in hendrerit quis, eleifend at dui. Aenean odio odio, eleifend vel malesuada porta, dapibus nec risus.</div>
</div>

这是我得到的 CSS，它可以工作，但我的问题是当文本完成后，它需要重新启动......它看起来像这样：

eleifend velmalesuada porta, dapibus nec risus。Lorem ipsum dolor sat amet, consectetur adipiscing

* {
  margin:0;
  padding:0;
  border:0;
}

@keyframes slide {
  from { left: 100%;}
  to { left: -100%;}
}
@-webkit-keyframes slide {
  from { left: 100%;}
  to { left: -100%;}
}

#marquee { 
  color:red; 
  background:#f0f0f0;
  width:100%;
  height:120px;
  line-height:120px;
  overflow:hidden;
  position:relative;
}

#text {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:120px;
  font-size:30px;
  animation-name: slide;
  animation-duration: 10s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  -webkit-animation-name: slide;
  -webkit-animation-duration: 10s;
  -webkit-animation-timing-function:linear;
  -webkit-animation-iteration-count: infinite;
}

Answer 1

我认为仅使用 CSS 不可能以可维护的方式实现。问题是没有真正的方法来创建可以在盒子级别包装的元素。

您实际上希望一个元素能够同时出现在 2 个位置：一次在屏幕左侧，剩余内容要滚动，另一次在屏幕右侧，内容已经滚动。我知道唯一可以做到这一点的 CSS 是背景图像，就像图形纹理可以使用 UV 重复设置包裹一样。

考虑到这一点，选项是使用<svg>which，这是一个图像，并将其设置为元素的重复背景。然后，我们可以为背景位置设置动画以使其滚动。

问题是文本不可选择（因为它是光栅化图像），您必须在 CSS 中的 SVG 中设置内容，这不是一个好习惯。

但是，作为概念证明，您可以这样做。请参阅下面的片段：

@keyframes slide {
  from {
    background-position-x: 0;
  }
  to {
    background-position-x: -100%;
  }
}

.container {
  width: 100%;
  height: 18px;
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='300'>\
  <text x='0' y='18'>hello world foo bar fizz buzz lorem ipsum</text>\
</svg>\
");
  background-repeat: repeat;
  background-size: auto;
  animation: 5s linear infinite slide;
}

<div class="container"></div>