Cara buat text Blink (Berkedip) dengan CSS3

Dari yg sudah kita ketahui Bersama tag <BLINK> telah dihapus dari standar Web. Meskipun beberapa browser mungkin masih mendukungnya, itu juga dalam proses untuk penghapusan fitur tag <BLINK>.
Saya sarankan Jangan menggunakan <BLINK> di situs lama atau baru kamu.
untuk kamu yang masih menggunakan tag blink di web kamu, segeralah untuk menghapusnya dan mengganti dengan CSS3 untuk membuat text berkedip
Peringatan: Jangan gunakan elemen ini (<BLINK>) karena non-standar html dan elemen ini sudah kuno dan tidak lagi terdaftar pada fitur html.
baik langsung saja ke tutorial Cara membuat text Blink (Berkedip) dengan CSS3

style CSS:
<style>
@keyframes blink{
0%{color:black}
50%{color:white}
100%{color:black}
}
@-webkit-keyframes blink{
0%{color:black}
50%{color:white}
100%{color:black}
}
.blink{
-webkit-animation:blink 2s linear infinite;
-moz-animation:blink 2s linear infinite;
animation:blink 2s linear infinite
}
</style>

HTML:
<span class="blink">text berkedip</span>

Hasil:
text berkedip

Untuk mebuat text animasi pelangi dengan CSS3 bisa membuat dengan metode diatas dengan mengganti dan menambahkan elemen color Pelangi

Style CSS:
<style>
@keyframes blinkrainbow{
0%{color:#FF0000}
14%{color:#FF7F00}
28%{color:#FFFF00}
42%{color:#00FF00}
56%{color: #0000FF}
70%{color:#4B0082}
84%{color:#8B00FF}
100%{color:#FF0000}
}
@-webkit-keyframes blinkrainbow{
0%{color:#FF0000}
14%{color:#FF7F00}
28%{color:#FFFF00}
42%{color:#00FF00}
56%{color: #0000FF}
70%{color:#4B0082}
84%{color:#8B00FF}
100%{color:#FF0000}
}
.blinkrainbow{
-webkit-animation:blinkrainbow 2s linear infinite;
-moz-animation:blinkrainbow 2s linear infinite;
animation:blinkrainbow 2s linear infinite
}
</style>

HTML:
<span class="blinkrainbow">Hasil Warna Warni</span>

Hasil:
Hasil Warna Warni

itulah tadi cara membuat animasi text ganti warna dengan CSS3, semoga bermanfaat untuk kamu
Cara buat text Blink (Berkedip) dengan CSS3
thumbnail Dipost oleh : Wisnu Priambodo
Judul : Cara buat text Blink (Berkedip) dengan CSS3
Terbit :2015-10-23T20:05:00+07:00


Anda sedang membaca artikel Cara buat text Blink (Berkedip) dengan CSS3. Jika ingin mengutip, harap memberikan link aktif dofollow ke URL http://wischain.blogspot.com/2015/10/cara-buat-text-blink-berkedip-dengan.html. Jika tidak akan diproses secara DMCA Takedown yang tentu saja tidak baik akibatnya bagi blog saudara. Terima kasih sudah singgah di blog ini.

4.5 401 Cara buat text Blink (Berkedip) dengan CSS3

1 komentar:

Marnes Kliker Admin delete 23 Oktober 2015 21.05

wah boleh juga dicoba nih mas, biar linknya jadi keren kedip-kedip gituh :)

Berkomentarlah dengan bijak dan sopan, Dilarang menggunakan Link Mati, Promo, dll.
boleh dikasih emoticon biar kelihatan unyu-unyu
Emoticon Kode Konversi

Terjemahkan



Mengenai Saya

Foto Saya

The great pleasure in life is doing what people say you cannot do.

Kategori

Back-to-top