how to create infinite text tail in css?-CodePudding

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 >
    <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>

CodePudding user response：

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 >
  <h1>hello</h1>
</div>