* {
	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:red;
	border-radius:50%;
	border:20px solid rgba(255,255,255,0.2);
	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);
}