如何使用CSS或Javascript创建无限大的字幕

我需要创建两个框（一个带重复图像，一个带重复链接），跨越浏览器窗口，无论大小；字幕项最初需要显示在屏幕的左侧，而不需要几秒钟的时间才能显示出来。它们之间的距离大约为20px/30px。字幕需要显得无限；也就是说，项目需要始终填充整个窗口宽度。字幕需要在悬停时暂停

我已经用CSS勾勒出了我基本上想要做的事情的基础。在这个反应的帮助下，我能够在我正在寻找的悬停上获得暂停

不幸的是，我仍然不确定如何使动画显示没有间隙，好像有无限多的单词从右向左移动。我正在尝试实现一个类似于本网站顶部的字幕，但是如果可能的话，可以使用CSS，如果必要的话，可以使用最少的Javascript

body{
保证金：0；
字体系列：“UniversLTPro Ex”；
字体大小：30px；
}
a{
文字装饰：无；
颜色：#000；
}
马奎尔先生{
高度：35px；
宽度：100%；
溢出：隐藏；
位置：相对位置；
背景色：#e9e5fb；
边框顶部：1件纯黑；
边框底部：1px纯黑；
填充：8px 0 4px 0；
}
.字幕组{
显示：内联块；
宽度：300%；
高度：40px；
位置：绝对位置；
溢出：隐藏；
动画：字幕30s线性无限；
}
.帐篷跨度{
浮动：左；
宽度：1100px；
}
.字幕：悬停div{
动画播放状态：暂停；
}
@关键帧选框{
0%{左：0%；}
100%{左：-1100px；}
}
/*@import必须位于文件的顶部，否则CSS将无法工作*/
@导入url（“//hello.myfonts.net/count/3909a7”）；
@字体类型{font family:'universiltpro Ex'；src:url（'webfonts/3909A7_0.eot'）；src:url（'webfonts/3909A7_0.eot？#iefix'）格式（'embedded-opentype'）、url（'webfonts/3909A7_0.woff2'）、url（'webfonts/3909A7_0.woff'）格式（'woff'）、url（'webfonts/3909A7_0.ttf'）格式（'truetype'）

---

你离得太近了。希望下面的演示是可以自我解释的，但是，基本上你需要以字幕宽度的-100%开始你的关键帧，然后以100%结束，这样在它重新启动之前就可以离开屏幕了

希望这有帮助

[编辑]添加了连续滚动

body{
保证金：0；
字体系列：“UniversLTPro Ex”；
字体大小：30px；
}
a{
文字装饰：无；
颜色：#000；
}
马奎尔先生{
高度：35px；
宽度：100%；
溢出：隐藏；
位置：相对位置；
背景色：#e9e5fb；
边框顶部：1件纯黑；
边框底部：1px纯黑；
填充：8px 0 4px 0；
}
/*需要根据时间进行调整*/
.大帐篷，大帐篷{
动画：选框10s线性无限
}
.侯爵，侯爵二号{
动画：字幕10s线性2.5s无限
}
.侯爵，侯爵三号{
动画：字幕10s线性5s无限
}
.侯爵，侯爵四{
动画：字幕10s线性7.5s无限
}
/*平衡元素*/
.字幕组{
位置：绝对位置；
宽度：100%；
左：100%；
高度：40px；
显示器：flex；
证明内容：之间的空间；
}
.字幕：悬停div{
动画播放状态：暂停；
}
/*在动画结束时添加延迟，以便在另一个div运行时不启动*/
@关键帧选框{
0%{左：100%；}
50%{左：-100%；}
100%{左：-100%}
}
/*@import必须位于文件的顶部，否则CSS将无法工作*/
@导入url（“//hello.myfonts.net/count/3909a7”）；
@字体类型{font family:'universiltpro Ex'；src:url（'webfonts/3909A7_0.eot'）；src:url（'webfonts/3909A7_0.eot？#iefix'）格式（'embedded-opentype'）、url（'webfonts/3909A7_0.woff2'）、url（'webfonts/3909A7_0.woff'））格式（'woff'）、url（'webfonts/3909A7_0.ttf'）格式（'truetype'）/code）<>

..
您需要使用javascript来实现这一点。它涉及到一旦文本移动了一半的宽度，就要对其进行克隆。然后，对移动了一半宽度的克隆进行克隆，并删除原始文本，以防止创建大量元素。然后冲洗并重复一次。@lawrencerone，同时进行一次彻底的回溯。由于大多数浏览器不再支持该元素，因此不建议使用该元素。（但通过一些polyfills它仍然可以工作）@WizardCoder非常感谢！老实说，我既期待也害怕这个答案。我在另一个网站上注意到了一个类似的想法，但我希望有一个CSS解决方案。我对Javascript非常陌生，所以我不太确定如何到达那里。@lucygoosey如果你是Javascript新手，这有点棘手。如果你在谷歌上搜索“jQuery-Marquee文本滚动插件”，第一个结果就是我以前使用过的插件，它可以让你做你需要的事情。不过现在可能有点旧了，所以看看周围有没有其他的选择。啊，太棒了。虽然我认为他们希望文本始终可见。啊，你说得对。这就是我没有读完整答案的原因。我会看看我是否能想出另一个解决方案并在这里编辑它谢谢，我真的很感激！但不幸的是，@WizardCoder是正确的。我希望文本始终可见。@lucygoosey花了很多心思，但如果您想查看我的编辑，我确实想出了一个解决方案。您可能需要拿出一个计算器或使用
calc
cssa