代码之家 › 专栏 › 技术社区 › user979331

CSS滚动文本循环

css html

user979331 · 技术社区 · 6 年前

我正在尝试使用纯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,它很好用,但我的问题是当文本完成后,它就可以重新启动了……不管怎样,当它完成时,它是从头开始的,所以当它结束时,它看起来是这样的:

马莱苏亚达门,内科里修斯。阴唇多洛尔坐在阿梅特,开始告别

* {
  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;
}

1 回复 | 直到 6 年前

zero298 6 年前

我不认为这是可能的,以一种可维护的方式,仅使用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>