Jika di blog - blog lain telah membahas cara membuat link warna - warni dengan bantuan javascript sekarang saya mau membahas tentang cara membuat link warna - warni dengan css3 @keyframes 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 {
-webkit-animation-name: systemwarna;
-webkit-animation-duration: 0.5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: ease-in-out;
-moz-animation-name: systemwarna;
-moz-animation-duration: 0.5s;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: alternate;
-moz-animation-timing-function: ease-in-out;
animation-name: systemwarna;
animation-duration: 0.5s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: ease-in-out;
}
@-webkit-keyframes systemwarna {
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; }
}
@-moz-keyframes systemwarna {
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; }
}
@keyframes systemwarna {
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. Setelah itu klik Simpan template dan sentuh link anda dan lihat efeknya.
