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。豆sum 多洛·阿梅特（Dolor）

* {
  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就不可能以可维护的方式实现这一目标。问题在于，实际上并没有一种方法可以创建可以在盒子级别包装的元素。

您实际上希望元素同时显示在两个位置：一次在屏幕左侧滚动剩余内容，另一次在屏幕右侧滚动具有已经滚动。我所知道的唯一可以做到这一点的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>

Answer 2

这是一种可扩展的解决方案-

在my blog上有详细的说明。

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>

Answer 3

一种方法是将您的文字作为背景图片元素放在网站上。为此，您可以将文本元素与-moz-element一起用作背景图像。

您的html代码将类似于以下内容（类名重复对应于您的“文本”）：

<div class="repetition">
        <h3 id="repeat">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.</h3>

必要的CSS就是这个（您可以随时更改样式，但是主体部分是此处的重要部分）：

.repetition {
    height: 0px; 
    overflow: hidden; 
    }       

h3 {
    text-align: center;
    font-weight: 300;
    font-size: 50px;
}
            
body {
    min-height: 100vh;
    background-image: -moz-element(#repeat);
    background-repeat: repeat-y;
    background-position: center;
}

以下是一个网站，提供了有关其工作方式的清晰示例：Background text image repetition

CSS滚动文本循环

3 个答案: