In this post i will tell you how to create the Blinking text and the Blinking image with the help of css3 animation properties and the keyframe properties. This is one of the simple trick to give the opacity 0 for each one sconds, So it turns into blinking effect.The Below example have the code and live demo check it out. I hope this post is very useful.
Code for Blinking text and image:
<html>
<head>
<title>How to Create Blink Text using css</title>
<style>
.blink_text {
animation: blinker 1s linear infinite;
}
.blink_img {
animation: blinker 2s linear infinite;
}
@keyframes blinker {
50% { opacity: 0; }
}
@keyframes blin {
50% { opacity: 0; }
}
</style>
</head>
<body>
<div class="wrapper">
<h1>Blinking Text using css</h1>
<span class="blink_text">This Will Blink</span><br/>
<h1>Blinking Image using css</h1>
<span class="blink_img"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxIfLg0izObvsPeWvi9ttUT2yyfj-NZTQNVbX4wjotrSc6Vr9ir9f0DDvRAzqq2JUHDsreiNKqqeHZsKGdBxyZNmd7yuw57wNCmoHhGMtuCTgi3VQq7Hhy-EMt5mJ6dlEmUVbcyEMzpnA/s1600/image-fade-effect-using-css.jpg" style="width:200px;" /></span>
</div>
</body>
</html>
<head>
<title>How to Create Blink Text using css</title>
<style>
.blink_text {
animation: blinker 1s linear infinite;
}
.blink_img {
animation: blinker 2s linear infinite;
}
@keyframes blinker {
50% { opacity: 0; }
}
@keyframes blin {
50% { opacity: 0; }
}
</style>
</head>
<body>
<div class="wrapper">
<h1>Blinking Text using css</h1>
<span class="blink_text">This Will Blink</span><br/>
<h1>Blinking Image using css</h1>
<span class="blink_img"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxIfLg0izObvsPeWvi9ttUT2yyfj-NZTQNVbX4wjotrSc6Vr9ir9f0DDvRAzqq2JUHDsreiNKqqeHZsKGdBxyZNmd7yuw57wNCmoHhGMtuCTgi3VQq7Hhy-EMt5mJ6dlEmUVbcyEMzpnA/s1600/image-fade-effect-using-css.jpg" style="width:200px;" /></span>
</div>
</body>
</html>
1 Comments
:-) thanks a lot.
ReplyDelete