Membuat Teks Berkedip dengan CSS3
29 Mei 2010 - - 6
Berikut kode css3 untuk membuat efek teks berkedip:
<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>
<div class="bg-blink">
Blinking Background </div>
<br />
<div style="background-color: red;">
<span class="blink"> Blinking Text </span>
</div></div>
Hasil kode diatas adalah sebagai berikut:
Blinking Background
Blinking Text
Terimakasih, anda telah membaca postingan dengan judul "Membuat Teks Berkedip dengan CSS3", semoga postingan ini bermanfaat untuk anda, budayakan berkomentar setelah membaca ya. 😊
thanks atas informasinya yang sangat bermanfaat dan mudah dicerna, salam kenal ya gan, follow me
BalasHapushttp://caramembuatyangakumau.blogspot.com
yess... nyepam hapus looo
Hapusapik tenan ,trims mr mung
BalasHapus@hadi: selamat mencoba.
BalasHapusAlhamdulillah...ilmunya sangat bermanfaat.Mksh Mr.Mung
BalasHapusAlhamdulillah.... terimakasih kunjunganya, semoga manfaat.
Hapus