我正在尝试创建一个新闻滚动条,水平文字可以连续滚动而不会在循环之间产生中断。理想情况下,解决方案将是纯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;
}
.marquee1 span { animation-delay: -2.5s; } .marquee2 span { animation-delay: 0s; }
- Andrew Hawes