The Blink HTML tag is used to blinking the text slowly like a flashlight. The Blink HTML is the non-standard element of the HTML that is used to surround the text, which flashes slowly. The general meaning of the blinking text in HTML, it is light flashing like as ON and OFF in a continuous way. Very rarely chance of used the Blink effect in HTML. Though some browsers might still support it, it should have already been deleted from the relevant web standards, is also within the process of being dropped, or may only be kept for compatibility purposes.
HTML blink tag The following is the example of Blink HTML Tag. There are two tags of blink tag one is opening tag and the second one is the closing tag. The opening tag is telling the browser to blink the text from this text and the closing tag is telling the browser blink text to this text, as showing in the following. <!DOCTYPE html> <html> <head> <title>This is border properties</title> </head> <body> <p>There is the Example of <blink>Blink HTML</blink> that is used to flashing the text</p> </body> </html>
The output of Blink HTML text
Examples of Blink HTML HTML code for blinking text effects <!DOCTYPE html> <html> <head> <title>Title of the document</title> <style>
.blink { animation: blinker 0.6s linear infinite; color: #1c87c9; font-size: 30px; font-weight: bold; font-family: sans-serif; } @keyframes blinker { 50% { opacity: 0; } } .blink-one { animation: blinker-one 1s linear infinite; } @keyframes blinker-one { 0% { opacity: 0; } } .blink-two { animation: blinker-two 1.4s linear infinite; } @keyframes blinker-two { 100% { opacity: 0; } } </style> </head> <body> <p class="blink">Blinking text</p> <p class="blink blink-one">CSS blinking effect for opacity starting with 0%</p> <p class="blink blink-two">CSS blinking effect for opacity starting with 100%</p> </body> </html>
HTML code for blinking text color <!DOCTYPE html> <html> <head> <title>Title of the document</title> <style> blink { color: #1c87c9; font-size: 20px; font-weight: bold; font-family: sans-serif; } </style> </head> <body> <h1>The <blink> Element </h1> <blink>The <blink> element is deprecated. To attain blinking effect you should use CSS or JavaSrcipt. See examples in the next section.</blink> </body> </html>
Example of blinking effect with the CSS text-decoration property:
<!DOCTYPE html> <html> <head> <title>Title of the document</title> <style> .blink { text-decoration: blink; color: #1c87c9; font-size: 30px; font-weight: bold; font-family: sans-serif; } </style> </head> <p class="blink">This text may blink depending on the browser you use.</p> </body> </html>
Blink HTML CSS polyfill blink { -webkit-animation: 2s linear infinite condemned_blink_effect; /* for Safari 4.0 - 8.0 */ animation: 2s linear infinite condemned_blink_effect; } /* for Safari 4.0 - 8.0 */ @-webkit-keyframes condemned_blink_effect { 0% { visibility: hidden; } 50% { visibility: hidden; } 100% { visibility: visible; } } @keyframes condemned_blink_effect { 0% { visibility: hidden; } 50% { visibility: hidden; } 100% { visibility: visible; } }
Blinking effect with JavaScript <!DOCTYPE html> <html>
<head> <title>Title of the document</title> <style> #blink{ font-size: 30px; font-weight: bold; font-family: sans-serif; color: #1c87c9; transition:0.4s; } </style> </head> <body> <p id="blink">Blinking Effect with JavaScript</p> <script type="text/javascript"> var blink = document.getElementById('blink'); setInterval(function() { blink.style.opacity = (blink.style.opacity == 0 ? 1 : 0); }, 1000); </script> </body> </html>
Example with Span Tag <span class="blinking">Am I blinking?</span>
In the above, I have used a span tag for a blink HTML, Now add the following CSS Code. .blinking{ animation:blinkingText 1.2s infinite; } @keyframes blinkingText{ 0%{ color: #000; } 49%{ color: #000; } 60%{ color: transparent; } 99%{ color:transparent; } 100%{ color: #000; } }
Browser Support of Blink Tags
Reference If you want to learn more about blink html then visit the official website: Visit
Visit the HTML tutorial list. And make strong your HTML concept. Click here. wuschools.com is always written about the HTML concept for the HTML lover. And writes about how HTML makes your life easy if you are a web site developer. We help you to continue your learning.