September 15, 2014
sebagai kita tahu hover adalah efek css ketika disentuh cursor, ia akan berubah..
seperti efek gambar berubah, menjadi blur, berputar, atau sebagainya ketika disentuh cursor..
lalu ada beberapa blog yang memang membuat link merekaa dengan efek hover link berubah menjadi warna warni..
bagaimana caranya? ok berikut scriptnya
a:hover {
-webkit-animation-name: pulsate;
-webkit-animation-duration: 3s;
-webkit-animation-timing-function: ease-in-out;
}
@-webkit-keyframes pulsate {
0% { background-color:#DEDEDE;}
5% { background-color:#109F9D;}
10% { background-color:#B19FD9;}
15% { background-color:#D600AF;}
20% { background-color:#E9E32E;}
40% { background-color:#38374A; }
45% { background-color:#711943; }
50% { background-color:#3FFFF5; }
55% { background-color:#1F67C5; }
60% { background-color:#6541B3; }
80% { background-color:#45002D; }
90% { background-color:#109F9D; }
100% { background-color:#DEDEDE; }
}
bisa ko diganti dengan style anda sendiri warnanya.. bagaimana merubahnya hanya dibagian tertentu?
misalnya dibagian footer saja
#footer a:hover {...}Mengatur lamanya animasi
untuk mengatur lamanya animasi anda ubah saja script
-webkit-animation-duration: 3s;ganti dengan lamanya waktu yang anda tentukan
Hanya hurufnya saja yang warna warni?
tapi kok linknya jadi backgroundnya aja yang berubah warna? bagaimana jika hanya hurufnya aja, backgroundnya gak ikutan warna warni?
pada script diatas.. ganti background color: menjadi color.. (hapus backgroundnya) ..
ok segitu dulu triknya.. oh ya makasih ya buat Djogz yang udah ngajarin trik ini.. :)
sekian dulu ya.. bye..
sumber:
