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 vel malesuada porta，dapibus nec risus。 Lorem ipsum dolor sit 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;
}

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

Answer 1

我认为仅使用 CSS 无法以可维护的方式实现这一点。问题是没有真正的方法来创建可以在框级别包装的元素。

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

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

问题是文本不是不可选择的（因为它是光栅化图像），您必须在 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>

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

Answer 2

这是一个很好扩展的解决方案 -

详细解释可在 我的博客上 找到。

 let outer = document.querySelector("#outer");
let content = outer.querySelector('#content');

repeatContent(content, outer.offsetWidth);

let el = outer.querySelector('#loop');
el.innerHTML = el.innerHTML + el.innerHTML;

function repeatContent(el, till) {
    let html = el.innerHTML;
    let counter = 0; // prevents infinite loop

    while (el.offsetWidth < till && counter < 100) {
        el.innerHTML += html;
        counter += 1;
    }
}

 #outer {
    overflow: hidden;
}

#outer div {
    display: inline-block;
}

#loop {
    white-space: nowrap;
    animation: loop-anim 5s linear infinite;
}

@keyframes loop-anim {
    0% {
        margin-left: 0;
    }
    100% {
        margin-left: -50% /* This works because of the div between "outer" and "loop" */
    }
}

 <div id="outer">
    <!-- This div is important! It lets us specify margin-left as percentage later on. -->
    <div>
        <div id="loop"><div id="content">Hello, World&nbsp;</div></div>
    </div>
</div>

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