* {
	margin:0;
	padding:0;
	list-style:none;
}
.icon {
	width:100px;
	height:100px;
	margin:10px auto;
	background:red;
	padding:30px 0;
	box-sizing:border-box;
}
.icon ul li {
	width:40px;
	height:4px;
	background:#fff;
	margin:6px auto;
	transition:all 0.3s
}
.icon ul:hover {
	cursor:pointer;
}
.active li:nth-child(2) {
	opacity:0;
}
.active li:nth-child(1) {
	transform:translateY(10px) rotate(45deg)
}
.active li:nth-child(3) {
	transform:translateY(-10px) rotate(-45deg)
}