Lauf gradient

by basti1012

HTML

<div id="grad">
 <p id="hopp1" style="position:relative;top:30px;">B</p>
  <p id="hopp2" style="position:relative;top:20px;">a</p>
 <p id="hopp3" style="position:relative;top:10px;">s</p> 
  <p id="hopp4" style="position:relative;top:0px;">t</p>
  <p id="hopp5" style="position:relative;top:-10px;">i</p>
  <p id="hopp6" style="position:relative;top:0px;">1</p>
  <p id="hopp7" style="position:relative;top:10px;">0</p>
   <p id="hopp8" style="position:relative;top:20px;">1</p>
   <p id="hopp9" style="position:relative;top:30px;">2</p>
  

</div>

CSS

p:after{
  content="";
 mix-blend-mode: multiply;
}



#grad{
 
  display:flex;
   background: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet); 
 -webkit-background-clip: text;
 -webkit-text-fill-color:transparent;
 font-size:100px;
   animation: los 1s linear infinite;
}
@keyframes los{
0%{ background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);-webkit-background-clip: text;-webkit-text-fill-color: transparent;}
12,5%{ background-image: linear-gradient(to right, orange,yellow,green,blue,indigo,violet,red);-webkit-background-clip: text;-webkit-text-fill-color: transparent;}
25%{ background-image: linear-gradient(to right, yellow,green,blue,indigo,violet,red,orange);-webkit-background-clip: text;-webkit-text-fill-color: transparent;}  
37,5%{ background-image: linear-gradient(to right, green,blue,indigo,violet,red,orange,yellow);-webkit-background-clip: text;-webkit-text-fill-color: transparent;} 
50%{ background-image: linear-gradient(to right,blue,indigo,violet,red, orange,yellow,green);-webkit-background-clip: text;-webkit-text-fill-color: transparent;} 
62,5%{ background-image: linear-gradient(to right,indigo,violet,red, orange,yellow,green,blue);-webkit-background-clip: text;-webkit-text-fill-color: transparent;}  
75%{ background-image: linear-gradient(to right, violet,red,orange,yellow,green,blue,indigo);-webkit-background-clip: text;-webkit-text-fill-color: transparent;}  
87,5%{ background-image: linear-gradient(to right, violet,red,orange,yellow,green,blue,indigo);-webkit-background-clip: text;-webkit-text-fill-color: transparent;}
100%{ background-image: linear-gradient(to right,red,orange,yellow,green,blue,indigo,violet);-webkit-background-clip: text;-webkit-text-fill-color: transparent;}
}