Membuat Effec pelangi pada link dengan Css3 animasi

: 08.54 9 comments

K
alau sebelumnya kita pernah membuat effec pelangi pada link dengan menggunakan kode script ,mungkin dengan pertimbangan looding akan bertambah berat kita enggan untuk memasangnya ,nach kang Mahfid punya solusinya nich.....!!  karena yang akan kita gunakan untuk tutorial kali ini adalah Full kode Css3 , nah sebagai  contoh coba sorot dengan Cursor link di bawah ini


EFFEC PELANGI DENGAN CSS3 ANIMASI


Keuntungan kita mengggunakan css3 amation ini selain tidak membuat looding blog semakin berat juga kita bisa dengan mudah merubah warna link sesuai yang kita ingin kan dan kita juga dapat merubah kecepatan perubahan link dari warna yang satu ke warna yang lain nya
Nah untuk cara membuatnya letakkan kode css3 animasi di bawah ini tepat di atas kode  ]]></b:skin> berikut kode css3 nya :
@keyframes effecpelangi{0%{color:black;}19%{color:red;}25%{color:brown;}40%{color:blue;}55%{color:green;}70%{color:orange;}85%{color:magenta;}100%{color:black;}} @-o-keyframes effecpelangi{0%{color:black;}19%{color:red;}25%{color:brown;}40%{color:blue;}55%{color:green;}70%{color:orange;}85%{color:magenta;}100%{color:black;}} @-ms-keyframes effecpelangi{0%{color:black;}19%{color:red;}25%{color:brown;}40%{color:blue;}55%{color:green;}70%{color:orange;}85%{color:magenta;}100%{color:black;}} @-moz-keyframes effecpelangi{0%{color:black;}19%{color:red;}25%{color:brown;}40%{color:blue;}55%{color:green;}70%{color:orange;}85%{color:magenta;}100%{color:black;}} @-webkit-keyframes effecpelangi{0%{color:black;}19%{color:red;}25%{color:brown;}40%{color:blue;}55%{color:green;}70%{color:orange;}85%{color:magenta;}100%{color:black;}} a:hover{ /* http://karinafotocollection.blogspot.com*/ -o-animation:effecpelangi 4s infinite; /* Opera */  -ms-animation:effecpelangi 4s infinite; /* IE */  -moz-animation:effecpelangi 4s infinite; /* Firefox */  -webkit-animation:effecpelangi 4s infinite; /* Safari and Chrome */   }
Untuk merubah kecepatan perubahan warna sobat bisa rubah teks yang berwarna merah ,misal kita rubah menjadi 1s maka perubahan warna link akan semakin cepet dan sobat bisa juga merubah Color/warna sesuai dengan keinginan sobat....oke selamat mencoba ....
photo-avatar
Terima Kasih Sobat sudah membaca Artikel saya Tentang Membuat Effec pelangi pada link dengan Css3 animasi Silahkan tinggalkan jejak lewat form komentar untuk mempermudah Admin berkunjung balik ke blog sobat. Mau share ulang Article saya ini..? silahkan ..!! tentunya dengan Judul dan narasi yang berbeda dan jangan lupa untuk mencantumkan link sumber..Terima Kasih

9 komentar

ICAH BANJARMASIN delete 15 Juli 2012 pukul 09.28

Wahhh...asyik juga tuh bang Mahfid...sip kangg...hahahyyy

Unknown delete 16 Juli 2012 pukul 21.12

Terima kasih teman atas bimbingannya, sedikit-sedikit pengetahuan saya bertambah tentang CSS dari blog ini, sungguh bermanfaat

Unknown delete 16 Juli 2012 pukul 21.38

@ICAH BANJARMASINterima kasih atas suport nya sobat..

Unknown delete 16 Juli 2012 pukul 21.39

@oboySama sama sobat semoga tetap terjalin silaturrohmi di dumay...:D

Unknown delete 19 Juli 2012 pukul 02.38

wah,,ini blog bagus bener template nya bikin sendiri ya bos..?

Unknown delete 19 Juli 2012 pukul 07.53

@Ants Kaka thanks bos template ini karya Creating Website kang mahfid sendiri hanya melakukan sedikit modifikasi :D

Unknown delete 19 Juli 2012 pukul 18.47

wh,,keren banget dah bisa bikin template sendiri,,,boleh di share gak nih ilmu nya bang,,pasti bermanfaat banget tuh,,yang penting ilmu dasar nya aja gitu.,urusan modifikasi biar masing2 aja. thanks udah follow,,,saya juga mau numpang titip poto saya disini bang,.

Unknown delete 19 Juli 2012 pukul 20.35

@Ants Kaka he he he jadi malu ama para master master di atas ....

Andy Borneo delete 20 Juli 2012 pukul 18.01

saya pengen belajar nih bos.. maklum masih newbie.. hehehe..

Posting Komentar


Terima Kasih Sobat Sudah:
1. Berkomentar Dengan Sopan
2. Tidak Memasukkan Link Aktif Dalam Form Komentar
3. Berkomentar Sesuai Artikel/Postingan
4. Berilah Informasi Kepada Admin Jika ada script yang Sudah tidak berfungsi
5. komentar Jorok/kasar /berbau Sara/Porno /saya anggap sebagai SPAM
6.untuk memasukkan gambar gunakan <i rel="image">URL Gambar</i>