JS与CSS的无缝响应跑马灯效果

Question

嘿，我正在尝试实现无缝选框效果。 这是我要完成的示例。 https://dentripelantwerpen.cargo.site/

到目前为止我有这个：

https://rubi-rosa.de/home/

<div class="inner-content">
    <div class="outer-div">
      <div class="inner-container">
        <h1>&nbsp;DEN TRIPEL<br></h1>
      </div>
      <div class="inner-container2">
        <h1>&nbsp;DEN TRIPEL<br></h1>
      </div>
    </div>
</div>

这是我的 css

.inner-content {
width:100%;
height:100vh;
}


.outer-div {
width:100%;
overflow:hidden;
}

.inner-container {
animation: marquee 10s linear infinite;
}

.inner-container2 {
animation: marquee2 10s linear infinite; 
animation-delay: 5s;
}

 @keyframes marquee {
    from {transform: translateX(100%); }
    to {transform: translateX(-100%); }
     
     
 @keyframes marquee2 {
    from {transform: translateX(0%); }
    to {transform: translateX(-200%); }

我尝试了很多在 web 上找到的方法。得出的结论是我必须使用 div，它会在视口中进出转换。 但不知何故，只有其中一个正在显示。 我很想拥有像顶部链接的示例中那样流畅的 animation。 有没有人知道如何解决这个问题。

Answer 1

编辑：我收回我的回答。 回去看了看，它很不稳定。 如果有机会，我会回来的。

不用js也能得到你想要的。 我删除了一堆我觉得不需要的东西 html。

因为你正在制作两个需要尊重彼此的position的东西，所以我所做的是 position 他们绝对和你的东西工作得很好。 我添加了一些东西来显示不同的两个元素并且我的循环有点偏离（我因为工作的原因必须运行）。 检查笔看看我的意思。 您必须进行调整并在视觉上做得更好，但 function 就在那里。 你真的很亲密。

h1 {
  animation: marquee 10s linear infinite;
  position: absolute;
  font-size: 100px;
  width: 650px;
  border: 1px solid red;
}
.first {
  color: green
}
.second {
  left: 900px;
  color: blue
}

https://codepen.io/christopherpenny/pen/VwyvyXm