Javatpoint Logo
Javatpoint Logo

HTML <blink> Tag

What is Blinking Text?

Blinking text is the text which generally flashes on the screen or which changes color within a particular time interval. So, if the color changes quickly, it looks repetitive after some time, and it seems to be blinking. Blinking text is used to enhance the look of normal text, and it is used to make attractive web pages. With the help of <blink> tag, we can insert the text into this and make the text blink.

HTML code:

Output:

HTML blink Tag

Explanation:

In the above code, we have used the <blink> tag to blink some text lines, but in the output, it is not working. The reason for not working the blink tag is that the <blink> tag is removed or does not support by HTML anymore. Developers thought that sometimes it creates a problem for a regular user if some text is constantly blinking, so they removed it. We can blink the text using CSS and JavaScript code.

Note: We can blink the text by various techniques like we can change the color of the text frequently or we can change the opacity of the text. So, the change in the display of the text makes it blinking text, and as compared to normal text, users will focus more on the blinking text.

Blinking text can be achieved by using proper CSS keyframes. We will provide some examples of blinking text:

Example1: Blinking text example by changing the opacity of the text.

HTML code:

CSS code:

Output:

HTML blink Tag

Explanation:

In the above HTML code, we have first included the CSS file using a link tag to add the external CSS to our HTML code. Then we took one div tag in which we created one h2 tag and wrote some lines in that h2 tag.

Now in the CSS file, we set the basic margin and padding and the div tag into the center of the page. Now we set the animation for the h2 tag for 1.8sec, and the type of animation is linear, and it will repeat itself infinite times.

Now we set some keyframe rules for this animation, like if the animation starts, then the opacity of the text will be 0% which means text will not be displayed.

If animation is at 50%, then opacity will be at 0.6, and if animation is at 100%, then opacity will be set again to 0. The transition of the opacity will be so smooth, so it looks that the given text is blinking.

Example2:

Here, we will put the same animation for multiple tags where blink text will change its color with time.

HTML code:

CSS code:

Output:

HTML blink Tag

Explanation:

In the above HTML code, we have imported the CSS file to add the styling to our HTML code. Then we created two paragraphs with different class names and wrote down some text in each paragraph.

Now in the CSS part for each paragraph, we set the animation for 1.5 seconds, and in the keyframes, we define some rules.

If animation is at 0%, the color of the text will be red. If the animation is at 47% then the color will be black. If animation is at 62% and at 97%, then it will be transparent, and it will be invisible in the white background. If the animation is at 100%, then it will be again in black. So, changing the color of the text so frequently makes the text as the blinking text.


Next Topic#





Youtube For Videos Join Our Youtube Channel: Join Now

Feedback


Help Others, Please Share

facebook twitter pinterest

Learn Latest Tutorials


Preparation


Trending Technologies


B.Tech / MCA