In this tutorial, we'll make a simple CSS rainbow text animation.
Click here to checkout the source code for this tutorial.
HTML
In the index.html
file, we'll only need an h1
tag with text.
<h1>Superdev.</h1>
CSS
Our CSS file will include the h1
's basic styling as well as the code for animating the text.
Styling the text
h1 {
background-clip: text;
background: url('https://vivaldi.com/wp-content/uploads/colors-1024x656.png');
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: text 3s linear infinite;
}
Because no animations have been applied up to this point, our text will look like this:
Adding animations
@keyframes text {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 100%;
}
100% {
background-position: 0% 50%;
}
}
That's it π
You should see something like this when you open the index.html
file in your browser.
Top comments (0)