Html 纯 CSS 连续水平文本滚动不间断
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/45847392/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Pure CSS Continuous Horizontal Text Scroll Without Break
提问by lgants
I'm trying to create a news ticker with horizontal text that scrolls continuously without a break between loops. Ideally, the solution would be pure css/html, but I don't know if that's possible. Here's my rudimentary attempt so far: http://jsfiddle.net/lgants/ncgsrnza/. Note that the fiddle contains an unwanted break between each loop.
我正在尝试创建一个带有水平文本的新闻自动收报机，该文本在循环之间连续滚动而不会中断。理想情况下，解决方案是纯 css/html，但我不知道这是否可能。到目前为止，这是我的初步尝试：http: //jsfiddle.net/lgants/ncgsrnza/。请注意，小提琴在每个循环之间包含一个不需要的中断。
<p class="marquee"><span>This is text - This is text - This is text - This is text - This is text - This is text - This is text - This is text - This is text - This is text - This is text - This is text</span></p>
.marquee {
margin: 0 auto;
white-space: nowrap;
overflow: hidden;
}
.marquee span {
display: inline-block;
padding-left: 100%;
animation: marquee 5s linear infinite;
}
回答by rmurph46
You could try having two marquees and set one of them with a delayed animation of 2.5s which is half the time of the full animation (5s).
您可以尝试使用两个选取框并将其中一个设置为 2.5 秒的延迟动画，这是完整动画 (5 秒) 时间的一半。
.marquee {
margin: 0 auto;
white-space: nowrap;
overflow: hidden;
position: absolute;
}
.marquee span {
display: inline-block;
padding-left: 100%;
animation: marquee 5s linear infinite;
}
.marquee2 span {
animation-delay: 2.5s;
}
@keyframes marquee {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(-100%, 0);
}
}<p class="marquee">
<span>This is text - This is text - This is text - This is text - This is text - This is text - This is text - This is text - This is text - This is text - This is text - This is text - </span>
</p>
<p class="marquee marquee2">
<span>This is text - This is text - This is text - This is text - This is text - This is text - This is text - This is text - This is text - This is text - This is text - This is text - </span>
</p>