Açılır Kutu

Açılır Kutu

Posted by: pcextra Eylül 01, 2012    Comments

<style type="text/css">  .animated_div { width:60px; height:40px; background:#92B901; color:#ffffff; position:absolute; font-weight:bold; font-size:15px; padding:10px; float:left; margin:5px; -webkit-transition:-webkit-transform 1s,opacity 1s,background 1s,width 1s,height 1s,font-size 1s; -webkit-border-radius:5px; -o-transition-property:width,height,-o-transform,background,font-size,opacity; -o-transition-duration:1s,1s,1s,1s,1s,1s; -moz-transition-property:width,height,-o-transform,background,font-size,opacity; -moz-transition-duration:1s,1s,1s,1s,1s,1s; transition-property:width,height,transform,background,font-size,opacity; transition-duration:1s,1s,1s,1s,1s,1s; border-radius:5px; opacity:0.4; }  .animated_div:hover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); opacity:1; background:#1ec7e6; width:90px; height:60px; font-size:30px; } </style>  <div style="height:70px;"> <div class="animated_div">CSS3<br /><span style="font-size:50%;">Transition</span></div> </div>