Hello developers, today in this blog, you'll learn to create a Blinking Text Effect using HTML & CSS.
Blinking Text is a non-standard element that causes the enclosed text to flash slowly. These texts will blink automatically. That is the hard text will get hidden for a particular time and it gets displayed, this process is repeated continuously. The slow blink will hide slowly and get displayed slowly. This webpage can be used for advertisement and also for highlighting the content and it also can be used in children's websites to attract them.
In this blog (Blinking Text Effect) on the webpage, there are two sentences. One sentence on the left and one on the right. The sentence on the left side will blink fastly which is also called a hard blink and on the right side will blink slowly is also called a soft blink. This webpage is made by using blink animation and also by using CSS @keyframe property. The hard blink will blink fastly, that is the text will hide and display one second alternatively. Whereas the soft blink will blink slowly, that is the bold text will get displayed and it looks like the opacity applied and will get hidden and again it will appear like opacity applied text and then displayed as bold text, this process repeated.
The source code of this Blinking Text Effect is given below, if you want the source code of this program, you can copy it. You can use this Blinking Text Effect with your creativity and can take this project to the next level.
Blinking Text Effect [Source Code]
To make this website, you would like to make two files: an HTML file & a CSS file. First, create an HTML file with the name of index.html and remember, you have to create a file with a .html extension.
body{
background: #FDC830;
background: -webkit-linear-gradient(to right, #F37335, #FDC830);
background: linear-gradient(to right, #F37335, #FDC830);
}
.container {
width: 75%;
margin: 0 auto;
font-family: sans-serif;
}
h1 {
float: left;
width: 50%;
text-align: center;
margin-top: 3rem;
}
.text-red {
color: #12192c
}
.blink-hard {
animation: blinker 1s step-end infinite;
}
.blink-soft {
animation: blinker 1.5s linear infinite;
}
@keyframes blinker {
50% {
opacity: 0;
}
}
.credit a{
text-decoration: none;
color: #ffff;
font-weight: 800;
}
.credit {
font-family: Verdana, Geneva, Tahoma, sans-serif;
margin: 10px;
color:#000;
text-align: center;
}
Thank you for reading our blog. If you face any problem creating this Blinking Text Effect using HTML & CSS, then contact us or comment us. We'll try to provide the solution to your problem as soon as possible.
Post a Comment
Thank you
Learning robo team