我試圖為我的文字創建一個在螢幕上開始的無限循環。但是我找到的所有方法都是從螢幕外開始，並進入螢幕。之後，一切都完美符合我的需求，但起始點破壞了我的概念。
我知道我們有一些可以移動文字的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>
我也不喜歡那個水平捲軸，所以如果有任何辦法可以去掉它。
你可以用多種不同的方法來實現這個，但是你的嘗試還可以，所以我按照你的需求進行了修復。對於水平滾動，你只需要將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%); } }