Update GWarnet Gold terbaru :gwarnetgoldfree.blogspot.com

Hover Link Color With CSS3 Keyframe


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.
Previous
Next Post »

PERATURAN BERKOMENTAR DI BAGASBLOGGER :
1. Tidak Boleh memasukan Link aktif kedalam komentar
2. Tidak Boleh promosi berbagai macam
3. Tidak Boleh berkomentar yang akan menyinggung orang banyak

Bijaklah anda dalam berkomentar, Pengunjung yang bijak tidak akan berkomen Nice Info! Komentar-lah yang Relevan :)

Salam Hangat, Admin BagasBlogger ConversionConversion EmoticonEmoticon

Thanks for your comment