How to create flashing/blinking text using HTML?

Blinking simply means flashing any text in a specific pattern. You can imagine it with the scenario of switching on and off any light after a fixed interval of time. Let’s see different ways how to create a blinking/flashing effect on text in HTML.

Introduction

HTML is a standard Hyper-text-markup language, one of the web development technology. It simply designs the basic structure of a webpage, which means it is used to present content or text on the webpage. HTML is not a programming language.

To display any content on a web page you need to use HTML tags. Tags are predefined keywords in HTML, they determine which content will be displayed in what manner on the web page. They decide the format of web content to be displayed on the web page. All tags have two parts, one opening, and the second closing part. Text or keywords are written inside the opening(<) and closing symbols(>).example, <html>,<head>,<body>, etc. Any HTML document always starts with <!DOCTYPE html> a tag. similarly, we have a <blink> tag to create flashing text in HTML.

So now let’s move to next, to see how we can create blinking/flashing text in HTML.

HTML – Use of Blink tag to create blinking text

Have you ever wanted to add a little bit of flair to your website by making certain text flash or blink? It’s actually quite easy to do using HTML.

By use of <blink> tag. However, this is not a standard tag in HTML. But still, you can use it to blink/flash a text on the web browser.

Run in Codedamn

<!DOCTYPE>
<html>
    <head>
        <title> blinking effect in text using HTML</title>
        <link rel="stylesheet" href="cssstyle.css" />
    </head>
    <body>
        <h1> Use of blink tag</h1>
        <blink> Hello, did you see blinking effect. </blink>
        <p> let's see the blink/flash effect above </p>
	<p> You may not able to see blinking effect in above implementation, because now most of the browsers do not support blink tag.</p>
	<p> You can use Netscape version 5.0. It supports  blink tag feature. Similarly, there are some more browser which support this tag, you should search for it.</p>
			
    </body>
</html>
Code language: HTML, XML (xml)

body {color: green;
}
blink {color: red;
  font-size: 30px
}
Code language: CSS (css)

As most browsers are not supporting this tag, hence to create flashing text you should try to use CSS and Javascript. Let me show one example for you.

CSS – create blinking text

Let’s move to an example of CSS code for flashing/blinking the text. For that, you have to use @keyframe. Keyframes are properties of CSS used to produce animation effects on web pages.

Run in Codedamn

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>CSS - Blinking text </title>
</head>
<body>
    <h1>
        CSS - blink the text 
    </h1>
    <p id = "blink_text">
        Now you can see the blinking/flashing text.
    </p>
</body>
</html>
Code language: HTML, XML (xml)

body{
  color: black;}
  
#blink_text{	
  animation-name:blink;
  width:280px;
  animation-duration:2s;
  animation-timing-function:ease-in;
  animation-iteration-count:Infinite;
  }

@keyframes blink{
  0%{color:red;}
  50%{color:white;}
  100%{color:red;}
Code language: CSS (css)

I have created a keyframe in the CSS sheet with the name style. Then to use it I connected the link to the HTML document. You can see above, if you have any doubts then please try to execute the code to see the effects.

for applying animations using CSS it has some properties like animation, @keyframes, animation-name and animation-duration, etc. You can customize these properties for a better experience.

Keyphrase has some functions for changing patterns with time such as ease, ease-in, ease-out and linear. Try to implement these all one by one to check their function and differences.

Javascript – blink the text

Now let’s see one example for blinking the text in javascript also. you may try some more approaches also. I have used the set function to create flashing text.

Run in Codedamn

<!DOCTYPE html>
<html>

<head>
    <title> JS - blink the text effect</title>
    <link rel="stylesheet" href="cssSheet.css" />
</head>

<body>
    <h1>Javascript- flashing the text</h>
    <p id="blink_effect"> hi, I am showing you an effect on this text.</p>
    <script>
        let blinking_text = document.getElementById('blink_effect');
        setInterval(function() {
            blinking_text.style.display = (blinking_text.style.display == 'none' ? '' : 'none');
        }, 1200);
    </script>
</body>
</html>
Code language: HTML, XML (xml)

 #blink_effect {
            color: orange;
            font-size: 20 px;
            transition: 1.5s;
        }     
Code language: CSS (css)

Calling a function repeatedly after a specified time interval is the main task performed by the setInterval function. In the above code, the set function calls the function to check if the text is visible then make it invisible for a specified period and vice-versa.

That’s all there is to it. With just a few lines of code, you can add flashing/blinking text to your website. Just keep in mind that the <blink> tag is not recommended for use in modern websites, so it is best to use the JavaScript method for creating a blinking effect.

Conclusion

So, you can execute all the above-mentioned codes to see if it working or not. you will observe the blinking/flashing effects on text. However, you can try your approach also, if you have learned now how to create the flashing/blinking effect either using HTML or CSS or Javascript.

Introduction

HTML – Use of Blink tag to create blinking text

CSS – create blinking text

Javascript – blink the text

Conclusion

No comments so far