当我在第二个文本上添加animation-delay时,第一个出现而没有移动.而且我没有成功实现文本滚动的无限循环.动画结束时总会有一些断点.
我尝试了一些在网上找到的代码,但没有一个完全符合我的意愿.
.scroll span {
font-size: 1.5em;
animation: scroll 20s linear infinite;
position: absolute;
top: 92vh;
white-space: nowrap;
overflow: hidden;
}
.second span {
animation-delay: 10s;
}
@keyframes scroll {
0% {
transform: translate(-100%,0);
}
100% {
transform: translate(100%,0);
}
}<div>
<p class="scroll first"><span>scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down </span></p>
<p class="scroll second"><span>scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down </span></p>
</div>我只想要一个无限滚动的文本.
最佳答案
延迟第二个动画的原因是因为您将动画设置为从-100％到100％,这实际上是2个动画周期.因此,动画中大约有1个周期的空白中断.当文本在圆周上移动时,可以考虑一下.从-100％到0,文本在屏幕上移动,但是从0到100％,文本不在屏幕上,并旋转回到起点.您的动画应从-100％到0.
您还需要添加显示：inline-block和padding-left：.scroll span的100％,以并排保留2个span标签.
.scroll {
margin: 0 auto;
white-space: nowrap;
overflow: hidden;
position: absolute;
font-size: 1.5em;
position: absolute;
top: 92vh;
white-space: nowrap;
}
.scroll span {
display: inline-block;
padding-left: 100%;
animation: scroll 20s linear infinite;
}
.second span {
animation-delay: 10s;
}
@keyframes scroll {
0% {
transform: translate(-100%,0);
}
100% {
transform: translate(0,0);
}
}<div>
<p class="scroll">
<span>scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down </span>
</p>
<p class="scroll second">
<span> scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down scroll down </span>
</p>
</div>