我試圖為我的文本創(chuàng)建一個(gè)在屏幕上開始的無限循環(huán)。但是我找到的所有方法都是從屏幕外開始，并進(jìn)入屏幕。之后，一切都完美符合我的需求，但是起始點(diǎn)破壞了我的概念。
我知道我們有一些可以移動(dòng)文本的HTML標(biāo)簽，但它也不能幫助我。
.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>
我也不喜歡那個(gè)水平滾動(dòng)條，所以如果有任何辦法可以去掉它。
1
0
0
你可以用多種不同的方法來實(shí)現(xiàn)這個(gè)，但是你的嘗試還可以，所以我按照你的需求進(jìn)行了修復(fù)。對于水平滾動(dòng)，你只需要將overflow-x設(shè)置為hidden，在某個(gè)父級div上設(shè)置即可。我將其設(shè)置為整個(gè)body，但你可以進(jìn)行更改。
.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>
