<!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>
