@charset 'utf-8';
*{
	padding: 0;
	border: 0;
	margin:0;
	text-decoration: none;
	outline: none;
}
html,body{
	width: 100%;
	height: 100%;
}
body{
	background-color: green;
}
.tip{
	text-align: center;
	font-size: 1.3em;
	color: #fff;
	line-height: 2em;
}
.content{
	position: absolute;
	top: 10%;
	left: 0;
	right: 0;
	margin:0 auto;
	width: 80%;
	height: 80%;
	background-color: #ccc;
	box-shadow: 0 0 10px #000;
	border-radius: 1%;
}
.content ul{
	height: 100%;
	width: 100%;
	font-size: 0;
	color: #fff;
}
.content .square{
	position: relative;
	display: inline-block;
	height: 25%;
	width: 25%;
	margin-top: 3.5%;
	margin-left: 6.25%;
	background-color: #000;
	vertical-align: middle;
}
.content .square .text{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);/*文字垂直居中*/
	width: 100%;
	font-size:2rem;
	text-align: center;
}

@media (max-width: 1024px){
	.content .square{
		width: 40%;
		height: 18%;
		margin-left: 6.66%;
		margin-top: 3%;
	}
}
/*相同样式*/
.top,.right,.bottom,.left,.center{
	position: absolute;
	background-color: yellow;
	transition: all 0.5s;
}
/*第一个*/
.first .top{
	top:0;
	left:0;
	height: 2px;
	width: 0;
}
.first .right{
	top: 0;
	right: 0;
	width: 2px;
	height: 0;
}
.first .bottom{
	right: 0;
	bottom: 0;
	width: 0;
	height: 2px;
}
.first .left{
	bottom: 0;
	left: 0;
	width: 2px;
	height: 0;
}
.first:hover .top,.first:hover .bottom{
	width: 100%;
}
.first:hover .left,.first:hover .right{
	height: 100%;
}
/*第二个*/
.second .top,.second .bottom{
	left: 0;
	right: 0;
	margin: 0 auto;
	width: 0;
	height: 2px;
}
.second .right,.second .left{
	top: 50%;
	height: 0;
	width: 2px;
}
.second .top{
	top: 20%;
}
.second .bottom{
	bottom:20%;
}
.second .right{
	right: 20%;
}
.second .left{
	left: 20%;
}
.second:hover .top,.second:hover .bottom{
	width: 80%;
}
.second:hover .right,.second:hover .left{
	top: 10%;
	height: 80%;
}
/*第三个*/
.third .top,.third .bottom{
	height: 2px;
	width: 0;
}
.third .top{
	top: 20%;
	left: 0;
}
.third .bottom{
	bottom: 20%;
	right: 0;
}
.third .right,.third .left{
	height: 0%;
	width: 2px;
}
.third .right{
	top: 0;
	right: 20%;
}
.third .left{
	bottom:0;
	left: 20%;
}
.third:hover .top{
	left: 10%;
	width: 80%;
}
.third:hover .bottom{
	right: 10%;
	width: 80%;
}
.third:hover .right{
	top: 10%;
	height: 80%;
}
.third:hover .left{
	bottom: 10%;
	height: 80%;
}
/*第四个*/
.forth .left{
	left: 0;
	height: 100%;
	width: 0;
}
.forth:hover .left{
	width: 100%;
}
.forth:hover .text{
	color:#000;
}
/*第五个*/
.fifth .top{
	top: 0;
	width: 100%;
	height: 0;
}
.fifth:hover .top{
	height: 100%;
}
.fifth:hover .text{
	color: #000;
}
/*第六个*/
.sixth{
	overflow: hidden;
}
.sixth .center{
	left: 0;
	right: 0;
	margin: 0 auto;
	border-radius: 50%;
	width: 100%;
	height: 100%;
	transform: scale(0);
	-o-transform: scale(0);
	-ms-transform: scale(0);
	-moz-transform: scale(0);
	-webkit-transform: scale(0);
}
.sixth:hover .center{
	transform: scale(2);
	-o-transform:scale(2);
	-ms-transform:scale(2);
	-moz-transform:scale(2);
	-webkit-transform:scale(2);
}
.sixth:hover .text{
	color: #000;
}
/*第七个*/
.seventh{
	overflow: hidden;
	background-color: yellow !important;
}
.seventh .center{
	left: 0;
	right: 0;
	margin: 0 auto;
	border-radius: 50%;
	width: 100%;
	height: 100%;
	transform: scale(2);
	-o-transform:scale(2);
	-ms-transform:scale(2);
	-moz-transform:scale(2);
	-webkit-transform:scale(2);
	background-color: #000 ;
}
.seventh:hover .center{
	transform: scale(0);
	-o-transform: scale(0);
	-ms-transform: scale(0);
	-moz-transform: scale(0);
	-webkit-transform: scale(0);
}
.seventh:hover .text{
	color: #000;
}
/*第八个*/
.eighth{
	overflow: hidden;
}
.eighth .center{
	left: 0;
	right: 0;
	margin:0 auto;
	width: 100%;
	height: 100%;
	transform: scale(2);
	-o-transform:scale(2);
	-ms-transform:scale(2);
	-moz-transform:scale(2);
	-webkit-transform:scale(2);
	background: none;
}
.eighth:hover .center{
	background-color: yellow;
	transform: scale(0);
	-o-transform: scale(0);
	-ms-transform: scale(0);
	-moz-transform: scale(0);
	-webkit-transform: scale(0);
}
/*第九个*/
.ninth{
	overflow: hidden;
}
.ninth .center{
	left: 0;
	right: 0;
	margin: 0 auto;
	width: 100%;
	height: 100%;
	transform: scale(0);
	-o-transform: scale(0);
	-ms-transform: scale(0);
	-moz-transform: scale(0);
	-webkit-transform: scale(0);
}
.ninth:hover .center{
	transform: scale(1);
	-o-transform: scale(1);
	-ms-transform: scale(1);
	-moz-transform: scale(1);
	-webkit-transform: scale(1);
}
.ninth:hover .text{
	color: #000;
}