Tout le monde, je veux obtenir un effet simple d'effacement de texte en utilisant seulement CSS et HTML, j'ai un code très simple.
mon objectif est que le texte ne soit pas redimensionné lorsque la zone de texte se rétrécit, et c'est ainsi que je veux obtenir ce type d'effet d'effacement du texte. veuillez noter que j'ai besoin d'un fond totalement transparent parce que je veux l'utiliser comme une sous-alerte pour twitch.
Existe-t-il une option permettant au texte de rester à la position fixe (côté droit), et lorsque la zone de texte s'efface, il passe de gauche à droite.
.containner{
width: 200px;
height: 150px;
background-color:green;
overflow: hidden;
position: relative;
}
.innercon{
right: 0%;
width: 200px;
height: 50px;
background-color: pink;
animation: animaitonx;
animation-duration: 5s;
animation-iteration-count: infinite;
overflow: hidden;
position: absolute;
/*animation-delay: 10s;*/
}
@keyframes animaitonx{
from{
width: 200px;
}
to{
width:0px;
}
}
#copy{
position: static;
}
.texttHolder{
width:200px;
text-align: right;
color:red
}
<body onload="mainx()">
<div id="containner" class="containner">
<div class="innercon">
<div class="texttHolder" id="copy">
here is your text
</div>
<div id="paste">
</div>
</div>
</div>
</body>