HTML Tag | W3Docs

Posted on by mtoplistChuyên mục:Top List

The HTML <blink> tag is a non-standard element used to create an enclosed text, which flashes slowly. General blink meaning is light flashing on and off in a regular or intermittent way. Blinking effect is used rarely, as it is annoying for users to watch a part of text constantly turning on and off.

HTML blink tag

The is a deprecated HTML tag . Though some browsers may still have 

 

<
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 
&lt;
blink
&gt;
 Element 
</
h1
>
    
<
blink
>The 
&lt;
blink
&gt;
 element is deprecated. To attain blinking effect you should use CSS or JavaSrcipt. See examples in the next section.
</
blink
>
  
</
body
>

</
html
>

Try it Yourself »

Blinking Effect with CSS

Another way to accomplish the blink effect was to use set the blink keyword of CSS text-decoration property.

Example of blinking effect with CSS3 animation:

 

<
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
>

Try it Yourself »

However, the blink keyword of the

text-decoration

property is not part of the CSS specification and not supported on most browsers.

An alternative way to attain the blinking effect you can use CSS3 animation property defined with @keyframes rule.

Example of blinking effect with the CSS text-decoration property:

 

<
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
>
  
<
body
>
    
<
p
 
class
=
"blink"
>This text may blink depending on the browser you use.
</
p
>
  
</
body
>

</
html
>

Try it Yourself »

Blinking Effect with JavaScript

You can also use scripts to make the element blink.

Example of blinking effect with JavaScript:

 

<
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
>

Try it Yourself »

mtoplist