Hover Link Berwarna Dengan CSS3 Keyframe - Metodenya adalah bagaimana ketika menciptakan effect berwarna pada link tanpa menggunakan Javascript. Jika di blog - blog lain sudah banyak tutorial seperti ini tapi menggunakan Javascript tapi sekarang yang akan saya bahas adalah menggunakan Css3 @Keyframe yaitu animasi yang terbuat dari css3. Jika browser anda tidak mendukung css3 maka trik ini tidak akan bisa anda lihat hasil kerjanya.
1. Cari kode
a:hover
dalam template anda.
2. Setelah ketemu hapus dan ganti dengan kode di bawah ini
a:hover {
animation-name: warna;
animation-duration: 0.5s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: ease-in-out;
}
@keyframes warna {
0% { color:red;}
5% { color:purple;}
10% { color:black;}
15% { color:green;}
20% { color:blue;}
40% { color:red; }
45% { color:pink; }
50% { color:orange; }
55% { color:aqua; }
60% { color:orange; }
80% { color:darkgray; }
90% { color:lime; }
100% { color:yellow; }
}
3. Terakhir save template anda..
Demo : Silahkan arahkan mouse ke -->
Hover Link Color With CSS3 KeyframeSemoga bermanfaat.