i want to make infinite text tail in css for my portfolio.
i try my best and i create some garbage.
it look very uncomfort to me.
so, please give me idea how i create this thing in css because i don’t have knowledge of javascript.
i try this:
div {
margin: 5vh 0;
}
.t {
display: flex;
font-size: 2rem;
animation:move 15s linear infinite;
}
@keyframes move{
0%{
transform:translatex(0);
}
100%{
transform:translatex(-100%);
}
}
.t p{
padding:2rem;
}<div class="t">
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
</div>
>Solution :
this is very easy.i create it in easy way and use only one div.
you can use text-shadow property to make infinite animation like this:
.text{
width:8rem;
text-align:center;
}
.text h1{
font-size:2rem;
line-height:1;
width:8rem;
animation: roll 5s linear infinite;
text-shadow: 8rem 0 black, calc(8rem * 2) 0 black,
calc(8rem * 3) 0 black,
calc(8rem * 4) 0 black,
calc(8rem * 5) 0 black,
calc(8rem * 6) 0 black,
calc(8rem * 7) 0 black,
calc(8rem * 8) 0 black,
calc(8rem * 9) 0 black;
}
@keyframes roll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}<div class="text">
<h1>hello</h1>
</div>