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>

如何使用CSS或Javascript创建无限显示的选取框

1 个答案: