Text Color Animation code:
1.index.html:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Text Color Animation</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="center"> <h1>Visual Code</h1> </div> </body> </html>
2.style.css:
body { margin: 0; padding: 0; font-family: Verdana, Geneva, Tahoma, sans-serif; } .center { position: absolute; top: 50%; transform: translateY(-50%); width: 100%; } h1 { margin: 0; padding: 0; text-align: center; font-size: 10em; color: transparent; text-transform: uppercase; background-image: linear-gradient(to right , red, green, orange, blue, yellow); -webkit-background-clip: text; animation: animate 20s linear infinite; background-size: 1000%; } @keyframes animate { 0% { background-position: 0% 100%; } 50% { background-position: 100% 0%; } 100% { background-position: 0% 100%; } }
