ads
Home » » Animasi Keren With CSS

Animasi Keren With CSS

Written By Ramadhan Fnw on Dec 12, 2011 | 7:43 PM

Animasi Keren With CSS

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. :)
Share this article :

47 komentar:

Ronalda Vicko said...

keren gan (y)

Ramadhan Fnw said...

@Ronalda Vicko: thnks gan. :)

IT-Soft Center said...

woow......manteb neh animasinya........izin nyoba gan :)

Kangmush said...

mantab nhe gan

Unknown said...

ajib mas bro dapat ilmu satu lagi ni soal CSS

BlogS of Hariyanto said...

wow..keren banget tutorialnya sobat :)

DODE-XP.COM said...

mantap nih tutornya :)

threex-hans.com said...

ikut mencobanya sob,,,

Mbah Qopet said...

keren masbro , cuma ane kasih saran nih , teks sama background ga kontras , bikin pusing bacanya.hihihi tombol "sebelumnya" punya ane tuh :P

Ramadhan Fnw said...

@IT-Soft Center: thnks gan. :)

Ramadhan Fnw said...

@Wong konsel: iya, thnks gan. hehe :)

Ramadhan Fnw said...

@Admin-Wahid Sahidu: oke, thnks mas bro. ^^

Ramadhan Fnw said...

@BlogS of Hariyanto: iya sob, thnks :)

Ramadhan Fnw said...

@DODE-XP.COM: hehe, thnks sob commentnya. ;)

Ramadhan Fnw said...

@threex-hans.com: silahkn sob, :)

Ramadhan Fnw said...

@Mbah Qopet: udah saya ganti sob, semoga gk pusing lagi yg baca. hehehe.

iya, ijin make ya sob. ;)

Unknown said...

mantap. Gan keanya kg bikin berat load jg ea

Unknown said...

mantap. Gan keanya kg bikin berat load jg ea

Mharjipes blog said...

Wuiss,, Mantab nigh Gan,, Gatot kaca nigh Floath Imagex Gatot kaca yagh mas?

Musa Khairul Umam said...

Keren bang

Unknown said...

berkunjung lagi membawa semangat di malam hari

DODE-XP.COM said...

jalan2 lagi :D

Rama88 said...

wihh ajib gan,, yg naik turun itu yakk,, =)) keren,, =))

Shireishou said...

Hihih aku suka yg di klik trus jd gede.... yg kanan. mau dicoba tp ga tau mau ditaruh dimana wehehehe

Sinto said...

mantap boleh juga nih buat di coba

Ramadhan Fnw said...

@katils: kyknya egk sob, coz pake CSS

Ramadhan Fnw said...

@Mharjipes blog: itu background BODY mas, hhehe

Ramadhan Fnw said...

@Musa Khairul Umam: thnks bang. :)

Ramadhan Fnw said...

@Admin-Wahid Sahidu: hehe, makasih sob kunjungannya. :)

Ramadhan Fnw said...

@DODE-XP.COM: thnks bang dode, ;D

Ramadhan Fnw said...

@Rama88: bukan sob, yg naik turun itu beda lagi. hehe

Ramadhan Fnw said...

@Shireishou: yg penting jgn taruh di pinggir jalan sob, ntar di ambil org. :D

Ramadhan Fnw said...

@Zh!nTho: silahkan dicoba sob,, ;)

RIefz said...

wihhh mantap nihhh!!

DODE-XP.COM said...

demonya dimana ya??

Unknown said...

kunjungan di sore hari sembari menunggu tips tips berikutnya

Unknown said...

selalu dukung kau sobatku

Ramadhan Fnw said...

@RIefz: thnks om. :D

Ramadhan Fnw said...

@DODE-XP.COM: itu gan disamping, yg mini icon silahkan di klik.

Ramadhan Fnw said...

@Admin-Wahid Sahidu: Thnkss sob, :)

dokunimus said...

Sekarang banyak yang blognya makai css design ya...
kalau ndak salah ini seperti model blogazine ya ?

Ramadhan Fnw said...

@dokunimus: iya, css memperindah soalnya..

iya sob, ini tema blogazine. :D

Riefz said...

mantappp animasinya!!

Ramadhan Fnw said...

@Riefz: thnks mas brow. :D

Zero_one said...

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

Zero_one said...

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

Ramadhan Fnw said...

@Zero_one lama" juga bisa kok gan. :)

 
Support : Creating Website | Johny Template | Mas Template
Copyright © 2011. Share Our Knowledge - All Rights Reserved
Template Modify by Creating Website Inspired Wordpress Hack
Proudly powered by Blogger