我需要创建两个跨越任意大小的浏览器窗口的选取框（一个带有重复图像，一个带有重复链接）；选框项目需要从一开始就显示出来，而不需要几秒钟的时间才能出现在屏幕上，并且每个项目之间的距离需要大约 20px/30px。当用户将鼠标悬停在其上时，选取框需要停止在页面上移动。
我正在为客户创建一个网站，我们决定在一个页面上使用选框来显示徽标，在另一个页面上使用选框来显示客户社交媒体的链接。我不确定如何根据文本或图像的大小来计算动画的必要持续时间，以使其看起来无限。我研究并尝试了 CSS 选项，并四处询问，结果发现通常建议使用 Javascript。我刚刚开始深入研究 Javascript，所以我对从哪里开始这个项目一无所知。这实际上与我需要的非常相似：/sf/answers/3157252591/。这是我想要实现的目标的一个示例：http://maxsiedentopf.com/work-2（只有底部的一个，但左侧没有重叠；只需从左向右移动）。这就是我试图用来达到预期效果的方法：https ://codepen.io/jamesbarnett/pen/kfmKa 。
body {
margin: 0;
font-family: "UniversLTPro-Ex";
font-size: 30px;
}
a {
text-decoration: none;
color: #000;
}
.marquee {
height: 35px;
width: 100%;
overflow: hidden;
position: relative;
background-color: #e9e5fb;
border-top: 1px solid black;
border-bottom: 1px solid black;
padding: 8px 0 4px 0;
}
.marquee div {
display: inline-block;
width: 300%;
height: 40px;
position: absolute;
overflow: hidden;
animation: marquee 12s linear infinite;
}
.marquee span {
float: left; …我需要创建跨越浏览器窗口的两个选取框（一个带有重复图像，一个带有重复链接），无论大小；选框项目需要最初显示在屏幕的左侧，而不需要几秒钟的时间才能出现。它们中的每一个都需要相距约 20 像素/30 像素。选框需要显得无限；也就是说，项目需要始终填满窗口的整个宽度。选取框需要在悬停时暂停。
我已经确定了我想要使用 CSS 做的事情的基础知识。在此响应/sf/answers/3956739741/的帮助下，我能够暂停我正在寻找的悬停。
不幸的是，我仍然不确定如何让动画看起来没有间隙，好像有无数的单词从右到左移动。我正在尝试实现一个像本网站顶部https://www.at-elier.org/那样的选框，但如果可能的话，使用 CSS 或最少的 Javascript，如果必要的话。
body {
margin: 0;
font-family: "UniversLTPro-Ex";
font-size: 30px;
}
a {
text-decoration: none;
color: #000;
}
.marquee {
height: 35px;
width: 100%;
overflow: hidden;
position: relative;
background-color: #e9e5fb;
border-top: 1px solid black;
border-bottom: 1px solid black;
padding: 8px 0 4px 0;
}
.marquee div {
display: inline-block;
width: 300%;
height: 40px;
position: absolute;
overflow: hidden;
animation: marquee 30s linear infinite;
}
.marquee span {
float: …