我正在尝试创建一个带有水平文本的新闻滚动条，该文本连续滚动，循环之间不会中断。理想情况下，解决方案是纯 css/html，但我不知道这是否可能。到目前为止，这是我的初步尝试：http://jsfiddle.net/lgants/ncgsrnza/ 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;
}
您可以尝试使用两个选取框，并将其中一个设置为 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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
