如何使用 CSS 或 Javascript 创建一个看起来无限的选取框

Question

我需要创建跨越浏览器窗口的两个选取框（一个带有重复图像，一个带有重复链接），无论大小如何；选取框项目最初需要显示在屏幕的左侧，而不是花费几秒钟的时间来显示。它们中的每一个都需要相距大约 20px/30px。选框需要看起来是无限的；也就是说，项目需要始终填满窗口的整个宽度。选取框需要在悬停时暂停。

我已经确定了我想要使用 CSS 完成的基本工作。在此回复https://stackoverflow.com/a/56524853/11623961 的帮助下，我能够在悬停时获得我正在寻找的暂停。

不幸的是，我仍然不确定如何使动画看起来没有间隙，就好像从右到左有无数个单词一样。我正在尝试实现一个类似于本网站顶部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: left;
  width: 1100px;
}

.marquee:hover div {
  animation-play-state: paused;
}

@keyframes marquee {
  0% { left: 0%; }
  100% { left: -1100px; }
}

/* @import must be at top of file, otherwise CSS will not work */
@import url("//hello.myfonts.net/count/3909a7");

  
@font-face {font-family: 'UniversLTPro-Ex';src: url('webfonts/3909A7_0_0.eot');src: url('webfonts/3909A7_0_0.eot?#iefix') format('embedded-opentype'),url('webfonts/3909A7_0_0.woff2') format('woff2'),url('webfonts/3909A7_0_0.woff') format('woff'),url('webfonts/3909A7_0_0.ttf') format('truetype');}
 

<div class="marquee">
  <div>
    <span><a href="#">twitter</a>&nbsp;&nbsp;&nbsp;
                <a href="#">instagram</a>&nbsp;&nbsp;&nbsp; 
                <a href="#">pinterest</a>&nbsp;&nbsp;&nbsp;
                <a href="#">spotify</a>&nbsp;&nbsp;&nbsp; 
               <a href="#">magazine</a>&nbsp;&nbsp;&nbsp;</span>
    <span><a href="#">twitter</a>&nbsp;&nbsp;&nbsp;
                <a href="#">instagram</a>&nbsp;&nbsp;&nbsp; 
                <a href="#">pinterest</a>&nbsp;&nbsp;&nbsp;
                <a href="#">spotify</a>&nbsp;&nbsp;&nbsp; 
               <a href="#">magazine</a>&nbsp;&nbsp;&nbsp;</span>
  </div>
</div>

Answer 1

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

希望这会有所帮助！

[edit]添加连续滚动

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;
}


/* would need to be adjusted depending on time */
.marquee .marqueeone{
  animation: marquee 10s linear infinite
}

.marquee .marqueetwo{
  animation: marquee 10s linear 2.5s infinite 
}

.marquee .marqueethree{
  animation: marquee 10s linear 5s infinite
}

.marquee .marqueefour{
  animation: marquee 10s linear 7.5s infinite
}

/* even out the elements */
.marquee div {
  position: absolute;
  width: 100%;
  left: 100%;
  height: 40px;
  display: flex;
  justify-content: space-between;
}

.marquee:hover div {
  animation-play-state: paused;
}

/* add delay at the end of animation so you dont start while another div is going */
@keyframes marquee {
  0% { left: 100%; }
  50% { left: -100%; }
  100% {left: -100%}
}

/* @import must be at top of file, otherwise CSS will not work */
@import url("//hello.myfonts.net/count/3909a7");

  
@font-face {font-family: 'UniversLTPro-Ex';src: url('webfonts/3909A7_0_0.eot');src: url('webfonts/3909A7_0_0.eot?#iefix') format('embedded-opentype'),url('webfonts/3909A7_0_0.woff2') format('woff2'),url('webfonts/3909A7_0_0.woff') format('woff'),url('webfonts/3909A7_0_0.ttf') format('truetype');}

<div class="marquee">
    <div class="marqueeone"><a href="#">twitter</a>&nbsp;&nbsp;&nbsp;
                <a href="#">instagram</a>&nbsp;&nbsp;&nbsp; 
                <a href="#">pinterest</a>&nbsp;&nbsp;&nbsp;
                <a href="#">spotify</a>&nbsp;&nbsp;&nbsp; 
               <a href="#">magazine</a>&nbsp;&nbsp;&nbsp;
               </div>
    <div class="marqueetwo"><a href="#">twitter</a>&nbsp;&nbsp;&nbsp;
                <a href="#">instagram</a>&nbsp;&nbsp;&nbsp; 
                <a href="#">pinterest</a>&nbsp;&nbsp;&nbsp;
                <a href="#">spotify</a>&nbsp;&nbsp;&nbsp; 
               <a href="#">magazine</a>&nbsp;&nbsp;&nbsp;</div>
         <div class="marqueethree"><a href="#">twitter</a>&nbsp;&nbsp;&nbsp;
                <a href="#">instagram</a>&nbsp;&nbsp;&nbsp; 
                <a href="#">pinterest</a>&nbsp;&nbsp;&nbsp;
                <a href="#">spotify</a>&nbsp;&nbsp;&nbsp; 
               <a href="#">magazine</a>&nbsp;&nbsp;&nbsp;</div>
                   <div class="marqueefour"><a href="#">twitter</a>&nbsp;&nbsp;&nbsp;
                <a href="#">instagram</a>&nbsp;&nbsp;&nbsp; 
                <a href="#">pinterest</a>&nbsp;&nbsp;&nbsp;
                <a href="#">spotify</a>&nbsp;&nbsp;&nbsp; 
               <a href="#">magazine</a>&nbsp;&nbsp;&nbsp;
      </div>
</div>