How to Create Text Color Animation using HTML and CSS ?
The text color can be changed according to programmer’s choice using CSS @keyframes rule.
HTML Code: The following code snippet creates HTML div element which contains the text for modification.
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <title>Text Color Animation</title></head><body> <div> <h2>GeeksforGeeks</h2> </div></body></html> |
CSS Code: The following code snippets demonstrates the design of the text using some basic CSS properties along with CSS @keyframes rule to change the color of the text to produce the animation effect.
<style> body { margin: 0; padding: 0; } div { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } h2 { font-size: 5em; font-family: serif; color: transparent; text-align: center; animation: effect 2s linear infinite; } @keyframes effect { 0% { background: linear-gradient( #008000, #00FF00); -webkit-background-clip: text; } 100% { background: linear-gradient( #3CE7D7, #000FFF); -webkit-background-clip: text; } }</style> |
Complete Code: It is the combination of the above two code sections.
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <title>Text Color Animation</title> <style> body { margin: 0; padding: 0; } div { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } h2 { font-size: 5em; font-family: serif; color: transparent; text-align: center; animation: effect 2s linear infinite; \ } @keyframes effect { 0% { background: linear-gradient( #008000, #00FF00); -webkit-background-clip: text; } 100% { background: linear-gradient( #3CE7D7, #000FFF); -webkit-background-clip: text; } } </style></head><body> <div> <h2>GeeksforGeeks</h2> </div></body></html> |
Output:
Article Contributed By :
Vote for difficulty
Improved By :
Practice Tags :
Please Login to comment...