Monday, 8 December 2014

Hover Link Color With CSS3 Keyframe

Coret Kalimat Kotor di Komentar
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 Keyframe
Semoga bermanfaat.

Ditulis Oleh : Adi Bayu // 01:46
Kategori:

0 comments:

Post a Comment