Efek Animasi Dengan Css
Trik Pertama
CSS (Taruh di atas ]]></b:skin> )
Nah, terakhir kode pemanggilannya. (Letakkan dimana saja: halaman posting, sidebar. Terserah kalian)
Trik Kedua:
CSS (Taruh di atas ]]></b:skin> )
Dan untuk pemanggilannya taruh seperti yang sudah saya jelaskan di atas:
Dan simpan...
Good Luck...
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:
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...
0 komentar:
Posting Komentar