Sabtu, 25 Februari 2012

Efek Animasi Dengan Css

Trik Pertama
CSS dibawah ini (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 kode dibawah ini dimana saja: halaman posting, sidebar. Terserah kalian)

<div id="infotips-muter">
Ganti teks ini dengan teks kalian. :)
<div>


Trik Kedua:
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);
}

Dan untuk pemanggilannya taruh seperti yang sudah saya jelaskan di atas:

<div id="infotips-membesar">
Ganti teks ini dengan teks kalian. :)
<div>

Dan simpan...

Good Luck...

Tidak ada komentar:

Posting Komentar