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)

Share Our Knowledge said...

@Ronalda Vicko: thnks gan. :)

IT-Soft Center said...

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

Wong konsel said...

mantab nhe gan

Admin-Wahid Sahidu 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

Share Our Knowledge said...

@IT-Soft Center: thnks gan. :)

Share Our Knowledge said...

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

Share Our Knowledge said...

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

Share Our Knowledge said...

@BlogS of Hariyanto: iya sob, thnks :)

Share Our Knowledge said...

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

Share Our Knowledge said...

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

Share Our Knowledge said...

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

iya, ijin make ya sob. ;)

katils said...

mantap. Gan keanya kg bikin berat load jg ea

katils 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

Admin-Wahid Sahidu 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

Zh!nTho said...

mantap boleh juga nih buat di coba

Share Our Knowledge said...

@katils: kyknya egk sob, coz pake CSS

Share Our Knowledge said...

@Mharjipes blog: itu background BODY mas, hhehe

Share Our Knowledge said...

@Musa Khairul Umam: thnks bang. :)

Share Our Knowledge said...

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

Share Our Knowledge said...

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

Share Our Knowledge said...

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

Share Our Knowledge said...

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

Share Our Knowledge said...

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

RIefz said...

wihhh mantap nihhh!!

DODE-XP.COM said...

demonya dimana ya??

Admin-Wahid Sahidu said...

kunjungan di sore hari sembari menunggu tips tips berikutnya

Admin-Wahid Sahidu said...

selalu dukung kau sobatku

Share Our Knowledge said...

@RIefz: thnks om. :D

Share Our Knowledge said...

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

Share Our Knowledge said...

@Admin-Wahid Sahidu: Thnkss sob, :)

dokunimus said...

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

Share Our Knowledge said...

@dokunimus: iya, css memperindah soalnya..

iya sob, ini tema blogazine. :D

Riefz said...

mantappp animasinya!!

Share Our Knowledge 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

Share Our Knowledge 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