How to Create Blinking Text using CSS ?
Blinking text effect also be known as the flashing text effect can be easily created using HTML and CSS @keyframes rule and the opacity property.
HTML Code: In this section, we will create a basic div element which will have some text inside it.
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <title>Blinking Text</title></head><body> <div> <h2>Blink</h2> </div></body></html> |
CSS Code: In this section, the designing of the text with the desired effect by using CSS @keyframes rule is implemented. The opacity property is set as shown below.
<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:#008000; text-align: center; animation: animate 1.5s linear infinite; } @keyframes animate{ 0%{ opacity: 0; } 50%{ opacity: 0.7; } 100%{ opacity: 0; } }</style> |
Final 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>Blinking Text</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: #008000; text-align: center; animation: animate 1.5s linear infinite; } @keyframes animate { 0% { opacity: 0; } 50% { opacity: 0.7; } 100% { opacity: 0; } } </style></head> <body> <div> <h2>Blink</h2> </div></body> </html> |
Output:
Please Login to comment...