迅速搬移文字

Question

我试图为我的文本创建一个在屏幕上开始的无限循环。但是我找到的所有方法都是从屏幕外开始，并进入屏幕。之后，一切都完美符合我的需求，但是起始点破坏了我的概念。

我知道我们有一些可以移动文本的HTML标签，但它也不能帮助我。

.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>

我也不喜欢那个水平滚动条，所以如果有任何办法可以去掉它。

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>