Oke, lama tak posting kali ini saya akan posting cara membuat animasi keren dengan CSS. Mungkin trik ini pernah saya gunakan dalam posting sebelumnya. Nah, yang bisa muter jika di sentuh mouse itulah yang saya maksud. Tapi kali ini saya akan posting 2 trik, yaitu ANIMASI MEMUTAR dan MEMBESAR. Untuk DEMOnya bisa kalian temukan di samping. (Tersembunyi. qiqiqi)
Oke langsung saja ke stepnya.
| Trik Pertama Pada trik pertama ini, saya akan berbagi cara membuat Animasi memutar. Sudah lihat Demonya kan? Nah, langsung saja dibawah ini nih kodenya. Untuk membuat seperti demo yang kalian lihat. CSS (Taruh di atas ]]></b:skin> ) #infotips-muter{ width:140px; height:80px; border:1px solid #999; box-shadow: 5px 3px 5px #aaa; margin:5px auto; padding:5px; background:#9bbddd; font-size:12px; font-weight:bold; background-color: yellow; -webkit-transition: all 0.7s ease-in-out; -moz-transition: all 0.7s ease-in-out; -o-transition: all 0.7s ease-in-out; } #infotips-muter:hover { -webkit-transform: rotate(360deg) scale(1.5); -moz-transform: rotate(360deg) scale(1.5); -o-transform: rotate(360deg) scale(1.5); } Nah, terakhir kode pemanggilannya. (Letakkan dimana saja: halaman posting, sidebar. Terserah kalian. :) <div id="infotips-muter"> Ganti teks ini dengan teks kalian. :) <div> | Trik Kedua Untuk yang kedua, saya akan berbagi cara membuat Animasi membesar. Langsung saja deh, lihat dibawah. Itu kode untuk membuatnya. CSS (Taruh di atas ]]></b:skin> ) #infotips-membesar { width:140px; height:100px; border:1px solid #999; box-shadow: 5px 3px 5px #aaa; margin:5px auto; padding:5px; background:#9bbddd; font-size:12px; font-weight:bold; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; } #infotips-membesar:hover { -webkit-transform:scale(1.5); -moz-transform:scale(1.5); -o-transform:scale(1.5); } Nah, terakhir kode pemanggilannya. (Letakkan dimana saja: halaman posting, sidebar. Terserah kalian. :) <div id="infotips-membesar"> Ganti teks ini dengan teks kalian. :) <div> |
DONE. SELAMAT MENCOBA.. GOOD LUCK.. :)
DEMO CONTOH PERTAMA
Ganti teks ini dengan teks kalian. :)
DEMO CONTOH KEDUA
Ganti teks ini dengan teks kalian. :)
45 komentar:
keren gan (y)
@Ronalda Vicko: thnks gan. :)
woow......manteb neh animasinya........izin nyoba gan :)
mantab nhe gan
ajib mas bro dapat ilmu satu lagi ni soal CSS
wow..keren banget tutorialnya sobat :)
mantap nih tutornya :)
ikut mencobanya sob,,,
keren masbro , cuma ane kasih saran nih , teks sama background ga kontras , bikin pusing bacanya.hihihi tombol "sebelumnya" punya ane tuh :P
@IT-Soft Center: thnks gan. :)
@Wong konsel: iya, thnks gan. hehe :)
@Admin-Wahid Sahidu: oke, thnks mas bro. ^^
@BlogS of Hariyanto: iya sob, thnks :)
@DODE-XP.COM: hehe, thnks sob commentnya. ;)
@threex-hans.com: silahkn sob, :)
@Mbah Qopet: udah saya ganti sob, semoga gk pusing lagi yg baca. hehehe.
iya, ijin make ya sob. ;)
Wuiss,, Mantab nigh Gan,, Gatot kaca nigh Floath Imagex Gatot kaca yagh mas?
Keren bang
berkunjung lagi membawa semangat di malam hari
jalan2 lagi :D
wihh ajib gan,, yg naik turun itu yakk,, =)) keren,, =))
Hihih aku suka yg di klik trus jd gede.... yg kanan. mau dicoba tp ga tau mau ditaruh dimana wehehehe
mantap boleh juga nih buat di coba
@katils: kyknya egk sob, coz pake CSS
@Mharjipes blog: itu background BODY mas, hhehe
@Musa Khairul Umam: thnks bang. :)
@Admin-Wahid Sahidu: hehe, makasih sob kunjungannya. :)
@DODE-XP.COM: thnks bang dode, ;D
@Rama88: bukan sob, yg naik turun itu beda lagi. hehe
@Shireishou: yg penting jgn taruh di pinggir jalan sob, ntar di ambil org. :D
@Zh!nTho: silahkan dicoba sob,, ;)
wihhh mantap nihhh!!
demonya dimana ya??
kunjungan di sore hari sembari menunggu tips tips berikutnya
selalu dukung kau sobatku
@RIefz: thnks om. :D
@DODE-XP.COM: itu gan disamping, yg mini icon silahkan di klik.
@Admin-Wahid Sahidu: Thnkss sob, :)
Sekarang banyak yang blognya makai css design ya...
kalau ndak salah ini seperti model blogazine ya ?
@dokunimus: iya, css memperindah soalnya..
iya sob, ini tema blogazine. :D
mantappp animasinya!!
@Riefz: thnks mas brow. :D
Blog ane d CSS na gx da kata2 ]]>
trus kod pemanggilnya d letakkan d mna?
klo bsa kash cntoh sekalian Screenshoot na ya gan..
sori ane masih newbie
sory gan sbelumnya klo ane copas and gx ngash sumber..
Inet ane tdi lagi lemot.
Tar ane kash dah sumberna..
Tpi ane mnta pnnjelasan yg lbih mendalam lgi tntang gmna carana pke trick d atas. Ane masih gx bsa
@Zero_one lama" juga bisa kok gan. :)
Post a Comment