Html 具有延迟和外观的水平滚动文本问题

在第二个文本上添加动画延迟时，第一个文本将不移动地显示。我并没有成功地实现文本滚动的无限循环。动画结束时，总会有一些断点

我尝试了在网上找到的几种代码，但没有一种完全符合我的要求

。滚动span{
字号：1.5em；
动画：滚动20秒线性无限；
位置：绝对位置；
顶部：92vh；
空白：nowrap；
溢出：隐藏；
}
.第二档{
动画延迟：10秒；
}
@关键帧滚动{
0% {
转换：转换（-100%，0）；
}
100% {
转换：转换（100%，0）；
}
}

向下滚动向下滚动向下滚动向下滚动向下滚动向下滚动向下滚动向下滚动向下滚动向下滚动向下滚动向下滚动向下滚动向下滚动向下滚动
向下滚动向下滚动向下滚动向下滚动向下滚动向下滚动向下滚动向下滚动向下滚动向下滚动向下滚动向下滚动向下滚动向下滚动向下滚动

第二个动画延迟的原因是，将动画设置为从-100%到100%，这实际上是两个动画周期。因此，动画中大约有1个周期出现空白中断。把它想象成文本在一个圆圈中移动。从-100%到0，文本在屏幕上移动，但从0到100%，文本在屏幕外循环回到起点。动画应介于-100%到0之间

您还需要将

display:inline block

和

padding left:100%

添加到

中。滚动span

，将2个

span

标记并排放置

。滚动{
保证金：0自动；
空白：nowrap；
溢出：隐藏；
位置：绝对位置；
字号：1.5em；
位置：绝对位置；
顶部：92vh；
空白：nowrap；
}
.滚动范围{
显示：内联块；
左：100%；
动画：滚动20秒线性无限；
}
.第二档{
动画延迟：10秒；
}
@关键帧滚动{
0% {
转换：转换（-100%，0）；
}
100% {
变换：平移（0,0）；
}
}

向下滚动向下滚动向下滚动向下滚动向下滚动向下滚动向下滚动向下滚动向下滚动向下滚动向下滚动向下滚动向下滚动向下滚动向下滚动向下滚动向下滚动向下滚动向下滚动


向下滚动向下滚动向下滚动向下滚动向下滚动向下滚动向下滚动向下滚动向下滚动向下滚动向下滚动向下滚动向下滚动向下滚动向下滚动向下滚动向下滚动向下滚动向下滚动

哦，谢谢你，伙计，太好了！但是有一个小问题，第一个p和第二个p之间没有空白。我们可以注意到在“向下滚动向下滚动”中。我能做些什么来解决这个问题？接得好！我已经为你编辑好了。只需在两个跨距的末尾添加

，即可将文本拆分。确保

前没有空格，否则它将注册2个空格。它应该是这样的：

down

一切都在codepen上运行良好，但是当我导入项目中的所有内容时，尽管存在

溢出：隐藏

，但我的文本占用的空间超过了viewwidth，因此它会破坏我的网站，我该怎么办？另外，第一个和第二个

p

之间的空间太大，我应该减少延迟吗？我用

宽度：100vw

修复了溢出问题，但我仍然存在一些空白问题