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 : nunuinux
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

4 komentar

Mas Marnes Admin delete 23 Oktober 2015 pukul 21.05

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

ucup1001 Admin delete 22 April 2020 pukul 20.58

terima kasih gan, sukses dipasang

KUPAS TERANG Admin delete 16 Agustus 2020 pukul 00.24

Thank you admin for the very useful information and articles.
I hope this website will increasingly attract readers
who are happy with the material that has been delivered.

I want to share a website that also has the potential
to be used as a reference source according to your reading interest,
you can try to see and get the content of the article.
-. body health / kesehatan tubuh
-. articles about food / makanan enak
-. articles about property / properti murah
-. articles about travel / tempat-tempat eksotis
-. articles about technology / berita teknologi
-. articles about SEO backlink/ berburu backlink

thanks you.

Justqiqi Admin delete 10 Juli 2021 pukul 08.34

Cara ini bisa buat gambar juga ga? Gambar jadi kedap kedip

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