CSS 3 Animasi Lingkaran Zoom - Efek Zoom Animation dengan CSS 3 merupakan tutorial yang saya bagikan di awal bulan Juli 2012 ini. Tidak banyak yang bisa saya bagikan, jadi silahkan di analisis sendiri code beserta scriptnya.
DEMO :
Ganti Disini
CSS 3 Animasi Lingkaran Zoom Lucu ya lingkarannya bisa berputar dan Zooming otomatis seperti Demo diatas, kalian bisa lihat bahwa lingkaran tersebut melakukan efek rotate dan skala secara otomatis.
CSS3 ini masih bisa anda kembangkan, silahkan anda manipulasi sesuka anda.
Script Embed
Oke Selamat Mencobanya.CSS3 ini masih bisa anda kembangkan, silahkan anda manipulasi sesuka anda.
Script Embed
<style type="text/css">
#contenido{
width:700px;
margin:0 auto;
padding:50px;
position:relative;
background:#FFF;
}
.circulo {
display:table-cell;
border-radius: 50px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
height:100px;
width:100px;
background:#dedede;
text-align:center;
vertical-align:middle;
}
.circulo span{
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
}
@-webkit-keyframes rotar
{
0% {-webkit-transform:scale(1) rotate(0deg);}
50% {-webkit-transform:scale(1.5) rotate(180deg);}
100% {-webkit-transform:scale(1) rotate(360deg);}
}
@-moz-keyframes rotar
{
0% {-moz-transform:scale(1) rotate(0deg);}
50% {-moz-transform:scale(1.5) rotate(180deg);}
100% {-moz-transform:scale(1) rotate(360deg);}
}
.circulo
{
-webkit-animation:rotar 4s infinite;
-moz-animation:rotar 4s infinite;
}
</style>
<div id="contenido">
<div class="circulo"><Ganti Disini</div>
</div>
Salam Blogger Donomulyo.
Terimakasih atas komentar Anda.
Budayakan Bertanya dan Berkomentar dengan Sopan.
Tolong tinggalkan komentar jika Anda menemukan Link yang Broken.
EmoticonEmoticon