how to Make Blink Text Effact In Pure CSS

Niyander August 06, 2020
Blink Text Effact In Pure CSS

Blinking Text Effact In Pure CSS 


1) Create Basic Html page


<!DOCTYPE html>
<html>
    <head>
        </head>
<body>
        <p>How to Making Blinking Text In Pure CSS</p>
</body>
</html>


2)  Add CSS on Head Section


<style>
.blink{
  animation: blinker 1s linear infinite;
}
@keyframes blinker {
  50% {
    opacity: 0;
  }
}
}
</style>


3) Add This Code On Body Section


<p>How to Making Blinking Text In Pure CSS</p>
<div class="blink"><h1>My name is Niyander</h1></div>




Full Code...


<!DOCTYPE html>
<html>
    <head>
        <style>
.blink{
  animation: blinker 1s linear infinite;
}
@keyframes blinker {
  50% {
    opacity: 0;
  }
}
}
        </style>
    </head>
<body>
<p>How to Making Blinking Text In Pure CSS</p>
<div class="blink"><h1>My name is Niyander</h1></div>

</body>
</html>



Tags
Reactions

Post a Comment

1 Comments