<!doctype html> <html> <head> <meta charset="utf-8"> <title>旋转动画(原创)-jq22.com</title> <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script> <style> * { margin:0; padding:0; } div { width:200px; height:200px; /*最后把下面这个去掉*/ /* background:#f00; */ /*圆边框 50% 上右下左 0px 0px 0px 0px*/ border-radius:50%; /* 上边距 右边距 下边距 左边距 */ margin:100px 10px 200px 100px; /*float:left; */ position:relative; } p { width:160px; height:160px; background:yellowgreen; border-radius:50%; border:20px solid rgba(255, 255, 255, 0.534); background-origin:border-box; position:absolute; z-index:1; transition:1S; } h1 { width:200px; height:200px; background:#333; border-radius:50%; margin:0 auto; text-align:center; /*line-height和height组合到一块儿，还有一种效果，就是如果把它们的值设置的一样了，文字就会在垂直方向居中*/ line-height:200px; position:absolute; transform:scale(0,0 ) rotate(0deg); transition:1S; color:#fff; } div:hover p { transform:scale(0,0) rotate(360deg); } div:hover h1 { transform:scale(1,1) rotate(360deg); } </style> </head> <body> <div> <p></p> <h1>你猜这是什么</h1> </div> <div> <p></p> <h1>这是旋转</h1> </div> <script> </script> </body> </html>