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 dibawah 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 Keyframe
Semoga bermanfaat.
Blogger
Google+
Facebook
Twitter