Blinking Background dan Text
Pada artikel sebelumnya saya pernah memberikan cara membuat blinking text dengan javascript. Kali ini saya memberikan cara lain dengan menggunakan kemampuan animasi pada CSS3.
Ada 2 efek berkedip yang akan dibuat disini, yang pertama adalah warna background merah yang berkedip dan yang kedua adalah text putih yang berkedip.
Untuk itu coding HTML dan CSS-nya adalah sebagai berikut.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
@keyframes bg-blink {
0% { background-color:#ff0000; }
100% { background-color:#ffffff; }
}
@-webkit-keyframes bg-blink {
0% { background-color:#ff0000; }
100% { background-color:#ffffff; }
}
.bg-blink {
-webkit-animation: bg-blink 1s linear infinite;
-moz-animation: bg-blink 1s linear infinite;
animation: bg-blink 1s linear infinite;
}
.blink {
animation: blink 1s steps(5, start) infinite;
-webkit-animation: blink 1s steps(5, start) infinite;
color:#ffffff;
}
@keyframes blink {
to { visibility: hidden; }
}
@-webkit-keyframes blink {
to { visibility: hidden; }
}
</style>
</head>
<body>
<div class="bg-blink"> Blinking Background </div>
<br/>
<div style="background-color:#ff0000;">
<span class="blink"> Blinking Text </span>
</div>
</body>
</html>
Selamat mencoba. Semoga sukses.