旋转跳跃
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <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> </head> <body> <div class="animated_div">旋转跳跃<br> <span style="font-size:50%">Transition</span> </div> </body> </html>
