Membuat Link hover warna - warni dengan CSS3

Membuat Link hover warna - warni dengan CSS3

Assalamualaikum Wr. Wb

Hai sobat Blogger, baru saja saya memberi Ilmu tentang cara Membuat Menu Melayang Sekarang saya memberi Ilmu lagi yang telah dapat dari abang Johanes

Sobat Blogger tau Hover kan? pasti tau lah yah,, Oke saya jelasin lagi, Hover menurut saya Saat Kursor sobat Blogger Menyentuh apa aja yang ada di blog itu sendiri ( jika salah Maaf, dan tolong beri tahu saya yah? :) )

Oke langsung aja Cara-cara menggunakan Hover yang berwarna - Warni ini :


Pertama,buka blog sobat
buka Rancangan => edit HTML

lalu masukan css dibawah ini di template sobat.

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; }
}

Keterangan1:

kode "a:hover" bisa sobat ganti ke elemen yang sobat atur sendiri bagian mana yang akan diberi efek hover.

CONTOH:

#header a

kita tambahkan efek hover menjadi

#header a:hover {...}

intinya,kita tinggal menambahkan kode" :hover " pada css yang kita inginkan.


sedangkan kode "a" adalah bagian tulisan/link.

Keterangan2:

"-webkit-animation-name: pulsate;" adalah css nama animasi yang terhubung/terikat ke kode "@-webkit-keyframes pulsate"

nama animasi harus sama,"pulsate"
tetapi bisa sobat ganti dengan nama sobat sendiri n_n


"-webkit-animation-duration: 3s;"
adalah durasi animasi

"-webkit-animation-timing-function: ease-in-out;"
adalah fungsi dari animasi ini

Modifikasi

Kode diatas tadi hanya merubah warna pada background link,jadi...
bagaimana dengan link'a?ini dia trik'a....

"background-color:#DEDEDE;" sperti yang kita tahu,background-color adalah kode css yang biasa digunakan untuk mengganti warna background,atau bisa disingkat menjadi background:#kodewarna;
untuk merubah warna link'a,kita tinggal menambahkan "color:#kode warna;"
jadi tinggal hapus aja warna'a seperti contoh di bawah ini.


@-webkit-keyframes pulsate {
0% { color:#DEDEDE;}
5% { color:#109F9D;}
10% { color:#B19FD9;}
15% { color:#D600AF;}
20% { color:#E9E32E;}
40% { color:#38374A; }
45% { color:#711943; }
50% { color:#3FFFF5; }
55% { color:#1F67C5; }
60% { color:#6541B3; }
80% { color:#45002D; }
90% { color:#109F9D; }
100% { color:#DEDEDE; }
}

bila kita ingin menambahkan efek kedua'a/background dan warna,tinggal dimasukan kedua css'a jadi seperti dibawah ini.


@-webkit-keyframes pulsate {
0% { background:#ffffff;color:#DEDEDE;}
5% { background:#000000;color:#109F9D;}
10% { background:#ffffff;color:#B19FD9;}
15% { background:#000000;color:#D600AF;}
20% { background:#ffffff;color:#E9E32E;}
40% { background:#2b2b2b;color:#38374A; }
45% { background:#ffffff;color:#711943; }
50% { background:#2b2b2b;color:#3FFFF5; }
55% { background:#ffffff;color:#1F67C5; }
60% { background:#2b2b2b;color:#6541B3; }
80% { background:#ffffff;color:#45002D; }
90% { background:#2b2bb;color:#109F9D; }
100% { background:#ffffff;color:#DEDEDE; }
}

Selamat mencoba
Thanks Buat

http://djogzs.blogspot.com

Anda sedang membaca artikel tentang Membuat Link hover warna - warni dengan CSS3 dan anda bisa menemukan artikel Membuat Link hover warna - warni dengan CSS3 ini dengan url http://bmcyber.blogspot.com/2012/03/membuat-link-hover-warna-warni-dengan.html,anda boleh menyebar luaskannya atau mengcopy paste-nya jika artikel Membuat Link hover warna - warni dengan CSS3 ini sangat bermanfaat bagi teman-teman anda,namun jangan lupa untuk meletakkan link Membuat Link hover warna - warni dengan CSS3 sebagai sumbernya.