How to Create Blinking Text using CSS ?
Last Updated :
18 Jun, 2020
Blinking text effect also be known as the flashing text effect can be easily created using HTML and CSS @keyframes rule and the opacity property.
HTML Code: In this section, we will create a basic div element which will have some text inside it.
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content =
"width=device-width, initial-scale=1.0" >
< title >Blinking Text</ title >
</ head >
< body >
< div >
< h2 >Blink</ h2 >
</ div >
</ body >
</ html >
|
CSS Code: In this section, the designing of the text with the desired effect by using CSS @keyframes rule is implemented. The opacity property is set as shown below.
<style>
body{
margin : 0 ;
padding : 0 ;
}
div{
position : absolute ;
top : 50% ;
left : 50% ;
transform: translate( -50% , -50% );
}
h 2 {
font-size : 5em ;
font-family : serif ;
color : #008000 ;
text-align : center ;
animation: animate 1.5 s linear infinite;
}
@keyframes animate{
0% {
opacity: 0 ;
}
50% {
opacity: 0.7 ;
}
100% {
opacity: 0 ;
}
}
</style>
|
Final Code: It is the combination of the above two code sections.
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content =
"width=device-width, initial-scale=1.0" >
< title >Blinking Text</ title >
< style >
body {
margin: 0;
padding: 0;
}
div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
h2 {
font-size: 5em;
font-family: serif;
color: #008000;
text-align: center;
animation: animate
1.5s linear infinite;
}
@keyframes animate {
0% {
opacity: 0;
}
50% {
opacity: 0.7;
}
100% {
opacity: 0;
}
}
</ style >
</ head >
< body >
< div >
< h2 >Blink</ h2 >
</ div >
</ body >
</ html >
|
Output:
Share your thoughts in the comments
Please Login to comment...