How to make color changing text?

Code Help HTML/CSS/JS
1

How can I make text that goes through the rainbow like LED lights? Thank you in advance! PS: I would prefer to keep it in html using the <style> tag!

2

I was able to get a solution with AI. If anyone as wondering, here is the code:

<!DOCTYPE html>
<html>

<head>
  <style>
    @keyframes rainbow {
      0% {
        color: red;
      }
      20% {
        color: orange;
      }
      40% {
        color: yellow;
      }
      60% {
        color: green;
      }
      80% {
        color: blue;
      }
      100% {
        color: violet;
      }
    }
    
    .rainbow {
      animation: rainbow 2s infinite;
    }
  </style>
</head>

<body>
  <h1 class="rainbow">Hello, rainbow text!</h1>
</body>

</html>
3

You also had to add the following code to your rainbow text:

.rainbow-text {
  animation-name: rainbow;
  animation-duration: (your duration here);
  animation-timing-function: linear;
}

and so on.

4

They actually didn’t, that was covered by the animation tag:

1 Like
5

Oh, I didn’t scroll to the bottom of the code while reading :rofl:

6

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.