如何实现CSS滚动文本循环？
如何实现CSS滚动文本循环？
提问于 2018-07-25 04:00:02
我正在尝试使用纯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
Stack Overflow用户
发布于 2018-07-25 13:24:10
我认为只使用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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/-100004117
复制相关文章
相似问题