Generally, blinking is nothing but light flashing ON and OFF in a regular or intermittent way. The HTML Blink tag is a non-standard element used to create a blinking text that flashes slowly.
Note: The tag is a deprecated in HTML, and it is not available in HTML 5.
The tag was used to create a fancy text effect on a webpage. Also, it is used to show some special information and direction to catch the user’s eyes.
At the same time, most internet usage guidelines strongly advise not to use blinking text. Because it can cause problems for disabled users , and this effect is annoying for users to watch a part of text continuously turning ON and OFF.
Estimated reading time: 4 minutes
Syntax:
In HTML, the blink tag contains both an opening tag and a closing tag. The content is written between these two tags.
<blink> Here is your text that has to blink </blink>
Sample of HTML Blink Tag:
Here is a complete HTML example showing the working of the <blink> tag.
<pre class="wp-block-syntaxhighlighter-code"><!DOCTYPE html>
<html>
<head>
<title>Blink tag</title>
<style>
blink {
color: #C40655;
font-size: 20px;
font-weight: bold;
font-family: sans-serif;
}
</style>
</head>
<body>
<h1>Sample of HTML Blink tag</h1>
<blink>The blink tag is forbidden in <a class="wpil_keyword_link" href="https://sharepointanchor.com/category/learn-html/" title="HTML" data-wpil-keyword-link="linked">HTML</a>. To attain this blinking effect you can use the CSS property.</blink>
</body>
</html></pre>
Result:
Use CSS Property for Blinking Effect:
You have an option to implement the blink feature, where the browser will not support the blink element. Let’s see the below examples.
HTML code for Blinking Effect:
<span class="blink_me">Blinking Text</span>
CSS code for Blinking Effect:
<style>
.blink_me {
animation: blinker 1s linear infinite;
}
@keyframes blinker {
50% { opacity: 0; }
}
</style>
Here, the animation duration is 1s , the timing is set to linear. That means it will be constant throughout. Finally, it defines infinite which means it will go on and on.
Result:
From the below code, it will execute like this:
Example of Blinking Effect with CSS text-decoration Property:
<!DOCTYPE html>
<html>
<head>
<title>HTML Blinking Effect with CSS3 Animation</title>
<style>
.blink {
text-decoration: blink;
color: #C40655;
font-size: 30px;
font-weight: bold;
font-family: sans-serif;
}
</style>
</head>
<body>
<p class="blink">This text may blink depending on your browser.</p>
</body>
</html>
Result:
The Text-decoration property is not part of the CSS specification and not supported on most browsers. You also have an alternative way to achieve the blinking effect. Just see the below example.
Example of Blinking Effect with CSS3 Animation:
Here we can use the CSS3 animation property defined with the @keyframes rule to implement the blinking effect.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.blink {
animation: blinker 0.6s linear infinite;
color: #C40655;
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">Text with Blinking effect</p>
<p class="blink blink-one">This is the CSS blinking effect for opacity starting with 0%</p>
<p class="blink blink-two">This is CSS blinking effect for opacity starting with 100%</p>
</body>
</html>
Result:
Use JavaScript for Blinking Effect:
JavaScript can also become a good alternative to the HTML tag.
Example of JavaScript Blinking Effect:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
#blink {
font-size: 30px;
font-weight: bold;
font-family: sans-serif;
color: #C40655;
transition: 0.1s;
}
</style>
</head>
<body>
<p id="blink">JavaScript Blinking effect.</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>
Result:
Browser Support:
Related Articles:
The post HTML Blink Tag appeared first on Share Point Anchor.
Top comments (0)