J'essaie de créer une boucle infinie pour mon texte qui démarre à l'écran. Mais toutes les méthodes que j'ai trouvées partent de l'écran et pénètrent dans l'écran. Après cela, tout a parfaitement fonctionné pour mes besoins, mais le point de départ a ruiné mon concept.
Je sais que nous avons des balises HTML qui peuvent déplacer le texte, mais cela ne m'aide pas non plus.
.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>
Je n'aime pas non plus cette barre de défilement horizontale, donc s'il y a un moyen de m'en débarrasser.
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Vous pouvez procéder de différentes manières, mais votre tentative s'est bien déroulée, alors je l'ai adapté à vos besoins. Pour le défilement horizontal, il vous suffit de définir overflow-x sur masqué et de le définir sur un div parent. Je l'ai réglé sur tout le corps, mais vous pouvez le modifier.
.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%); } }