Text schnell verschieben

Question

Ich versuche, für meinen Text eine Endlosschleife zu erstellen, die auf dem Bildschirm beginnt. Aber alle Methoden, die ich gefunden habe, beginnen auf dem Bildschirm und gehen in den Bildschirm über. Danach funktionierte alles perfekt für meine Bedürfnisse, aber der Ausgangspunkt machte mein Konzept zunichte.

Ich weiß, dass wir einige HTML-Tags haben, die den Text verschieben können, aber das hilft mir auch nicht.

.text1{
  animation: move 5s linear 2.5s infinite;
  transform: translateX(-100%);
}

*{
  margin: 0;
  padding:0;
}

.wrapper{
  display: flex;
}

@keyframes move{
  from{
    transform: translateX(-100%);
  }
  
   to{
     transform: translateX(100%);
   }
}

.text2{
  position: absolute;
  animation: move 5s linear 0s infinite;
}

.text1,.text2{
  font-size: 80px;
   white-space: nowrap;
}

<div class="wrapper">
  
<div class="text1">Lorem ipsum dolor sit amet. </div>

<div class="text2">Lorem ipsum dolor sit amet.</div>

</div>

Mir gefällt diese horizontale Bildlaufleiste auch nicht. Wenn es also irgendeine Möglichkeit gibt, kann ich sie entfernen.

Answer 1

你可以用多种不同的方法来实现这个，但是你的尝试还可以，所以我按照你的需求进行了修复。对于水平滚动，你只需要将overflow-x设置为hidden，在某个父级div上设置即可。我将其设置为整个body，但你可以进行更改。

.text1{
  animation: move 5s linear 2.5s infinite;
  transform: translateX(-100%);
}

*{
  margin: 0;
  padding:0;
}

.wrapper{
  display: flex;
}

body{
  overflow-x: hidden;
}

@keyframes move{
  from{
    transform: translateX(100%);
  }
  
   to{
     transform: translateX(-100%);
   }
}

.text2{
  position: absolute;
  animation: move 5s linear 0s infinite;
}

.text1,.text2, .text3{
  font-size: 50px;
   white-space: nowrap;
}

.text3{
  position: absolute;
   animation: move2 2.5s linear 0s;
     animation-fill-mode: forwards;

}

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

<div class="wrapper">
  
<div class="text1">Lorem ipsum dolor sit amet. </div>

<div class="text2">Lorem ipsum dolor sit amet.</div>

<div class="text3">Lorem ipsum dolor sit amet.</div>

</div>