Blinking Text Effect using HTML & CSS

Blinking Text Effect using HTML & CSS

 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.

<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>CSS Blinking Text || Learningrobo</title> <link rel="stylesheet" href="./style.css"> </head> <body> <div class="container"> <h1 class="text-red blink-hard">Hard Blink Learningrobo</h1> <h1 class="text-red blink-soft">Soft Blink Learningrobo</h1> <div class="credit">Made with <span style="color:tomato;font-size:20px;">❤</span> by <a href="https://www.learningrobo.com/">Learning Robo</a></div> </div> </body> </html>
CSS provides style to an HTML page. To make the page attractive, create a CSS file with the name style.css, and remember that you have to make a file with a .css 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;
  }
We hope you would like this Blinking Text Effect using HTML & CSS.

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.

Thank you
Learning robo team

إرسال تعليق

Thank you
Learning robo team

Post a Comment (0)

أحدث أقدم
Learning Robo says...
code copied
Welcome