如何使用 CSS 或 Javascript 创建选取框

Question

我需要创建两个选取框（一个带有重复图像，一个带有重复链接）以任意大小跨越浏览器窗口；选取框项目需要从一开始就显示出来，而不是花几秒钟就出现在屏幕上，并且每个项目都需要相隔大约 20 像素/30 像素。当用户将鼠标悬停在它上面时，选取框需要停止在页面上移动。

我正在为客户创建一个网站，我们决定在一个页面上使用一个选取框来显示徽标，在另一个页面上使用一个选取框来显示指向客户社交媒体的链接。我不确定如何根据文本或图像的大小来计算动画的必要持续时间以使其看起来无限。我已经研究并尝试了 CSS 选项，但我四处询问却发现通常建议使用 Javascript。我刚刚开始深入研究 Javascript，所以我对从哪里开始这个项目一无所知。这实际上与我需要的非常相似：https : //stackoverflow.com/a/45103608/11623961。这是我试图实现的一个例子：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;

  width: 25%;

}

@keyframes marquee {

  0% { left: 0; }

  100% { left: -150%; }

}

        <div class="marquee">

            <div>

                <span><a href="#">twitter</a></span>

                <span><a href="#">instagram</a></span> 

                <span><a href="#">pinterest</a></span>

                <span><a href="#">spotify</a></span> 

                <span><a href="#">magazine</a></span>

            </div>

        </div>

显然，我尝试做的事情有很多问题。选框不会出现无限，我还没有想出如何暂停悬停，项目相距太远。任何帮助将不胜感激。谢谢！

Answer 1

我认为 CSS 将是最好的选择......对于暂停和继续 JavaScript shold 做这项工作..

Answer 2

lucygoosey 你的问题已经解决了，如果你想要的更多，你应该为此付出更多的努力body {&nbsp;&nbsp; margin: 0;&nbsp; font-family: "UniversLTPro-Ex";&nbsp; font-size: 30px;}a {&nbsp; &nbsp; text-decoration: none;&nbsp; &nbsp; color: #000;}.marquee {&nbsp; height: 35px;&nbsp; width: 300%;&nbsp; position: relative;&nbsp; padding: 8px 0 4px 0;&nbsp; border: none;}.marq{&nbsp; background-color: #e9e5fb;&nbsp; border-top: 1px solid black;&nbsp; border-bottom: 1px solid black;&nbsp;&nbsp;}.marquee span {&nbsp; float: left;&nbsp; width: 300px;}@keyframes marquee {&nbsp; 0% { left: 0; }&nbsp; 100% { left: -150%; }}<div class="marq">&nbsp;&nbsp;<marquee onmouseover="this.stop();" onmouseout="this.start();">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<div class="marquee">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span><a href="#">twitter</a></span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span><a href="#">instagram</a></span>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span><a href="#">pinterest</a></span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span><a href="#">spotify</a></span>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span><a href="#">magazine</a></span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp;</marquee>&nbsp; &nbsp; &nbsp;</div>阅读有关选框标签的更多信息Marquee 标签文档 - 此处