body
{
	margin: 0;
	padding: 0;
}
ul
{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	margin: 0;
	padding: 0;
	display: flex;
}
ul li
{
	list-style: none;
}
ul li a
{
	display: block;
	position: relative;
	width: 100px;
	height: 100px;
	line-height: 110px;
	font-size: 40px;
	text-align: center;
	/* background: #ccc; */
	text-decoration: none;
	color: #262626;
	margin: 0 15px;
	transition: .5s;
}
ul li a span
{
	position: absolute;
	transition: transform .5s;
}
ul li a span:nth-child(1),
ul li a span:nth-child(3)
{
	width: 100%;
	height: 3px;
	background: #262626;
}
ul li a span:nth-child(1)
{
	top: 0;
	left: 0;
	transform-origin: right;
}
ul li a:hover span:nth-child(1)
{
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .5s;
}

ul li a span:nth-child(3)
{
	bottom: 0;
	left: 0;
	transform-origin: left;
}
ul li a:hover span:nth-child(3)
{
	transform: scaleX(0);
	transform-origin: right;
	transition: transform .5s;
}

ul li a span:nth-child(2),
ul li a span:nth-child(4)
{
	width: 3px;
	height: 100%;
	background: #262626;
}
ul li a span:nth-child(2)
{
	top: 0;
	left: 0;
	transform: scaleY(0);
	transform-origin: bottom;
}
ul li a:hover span:nth-child(2)
{
	transform: scaleY(1);
	transform-origin: top;
	transition: transform .5s;
}
ul li a span:nth-child(4)
{
	top: 0;
	right: 0;
	transform: scaleY(0);
	transform-origin: top;
}
ul li a:hover span:nth-child(4)
{
	transform: scaleY(1);
	transform-origin: bottom;
	transition: transform .5s;
}