I am wanting to make the text on my main image banner have a linear rainbow gradient effect that moves.
I have found the coding for it but can’t seem to find the specific section to add the div to. Everytime I try to add it, it will make it so all of my image banners have the effect. I only want it on one of them.
If someone could help me, that would be incredible!
My webpage is: notenoughrgb.store
Here is the coding:
Light Up Your World!
.animated_rainbow_1 {
font-size: 42px;
font-family: Arial Black, Gadget, sans-serif;
background-image: -webkit-linear-gradient(left, #f00, #ff2b00, #f50, #ff8000, #fa0, #ffd500, #ff0, #d4ff00, #af0, #80ff00, #5f0, #2bff00, #0f0, #00ff2a, #0f5, #00ff80, #0fa, #00ffd5, #0ff, #00d5ff, #0af, #0080ff, #05f, #002aff, #00f, #2b00ff, #50f, #8000ff, #a0f, #d400ff, #f0f, #ff00d4, #f0a, #ff0080, #f05, #ff002b, #f00);
-webkit-animation: animatedBackground_a 5s linear infinite alternate;
-webkit-background-clip: text;
-webkit-text-fill-color: #0000;
background-clip: text;
}
@keyframes animatedBackground_a {
0% { background-position: 0 0 }
100% { background-position: -500px 0 }
}