How to make text blink on my web page
To create blinking text, use either the below CSS or JavaScript example.
CSS Example
To create a CSS blink class, copy the below CSS code into the head of your web page.
<style type "text/css">
<!--
/* @group Blink */
.blink {
-webkit-animation: blink .75s linear infinite;
-moz-animation: blink .75s linear infinite;
-ms-animation: blink .75s linear infinite;
-o-animation: blink .75s linear infinite;
animation: blink .75s linear infinite;
}
@-webkit-keyframes blink {
0% { opacity: 1; }
50% { opacity: 1; }
50.01% { opacity: 0; }
100% { opacity: 0; }
}
@-moz-keyframes blink {
0% { opacity: 1; }
50% { opacity: 1; }
50.01% { opacity: 0; }
100% { opacity: 0; }
}
@-ms-keyframes blink {
0% { opacity: 1; }
50% { opacity: 1; }
50.01% { opacity: 0; }
100% { opacity: 0; }
}
@-o-keyframes blink {
0% { opacity: 1; }
50% { opacity: 1; }
50.01% { opacity: 0; }
100% { opacity: 0; }
}
@keyframes blink {
0% { opacity: 1; }
50% { opacity: 1; }
50.01% { opacity: 0; }
100% { opacity: 0; }
}
/* @end */
-->
</style>
Once the above CSS code has been inserted, you can use the "blink" class on any element. Below is a paragraph tag using the blink class.
<p class="tab blink">Example of blinking text using CSS Example.</p>
JavaScript Example
To create a JavaScript blink function, copy the below JavaScript code into the head of your page.
<script>
function blinker() {
$('.blinking').fadeOut(500);
$('.blinking').fadeIn(500);
}
setInterval(blinker, 1000);
</script>
Once the above JavaScript is inserted in your page, you can call the function by adding the "blinking" class to any element. Below is a paragraph tag using the blinking class.
<p class="blinking">Example of blinking text using JavaScript Example.</p>
CSS
html
Javascript
- asked 6 years ago
- Gul Hafiz
