영웅은 공부 따원 안 한다네/HTML CSS

[티스토리 스킨] 햄버거를 화살표 애니메이션

귀펀치토끼 2022. 11. 23. 16:17
#header .mobile-menu {
	position: absolute;
	top: 25px;
	right: 30px;
	transition: all ease 2s 0s;
	cursor: pointer;
	
}

#header .mobile-menu:hover .ham-line1{
	/* transform: translateY(-40px); */
	width: 80%;
	transform: translateX(-2px) translateY(2px) rotate(-45deg);
	transition: width 0.4s, transform 0.4s;

}
#header .mobile-menu:hover .ham-line3{
		width: 80%;
	transition: width 0.4s, transform 0.4s;
	transform: translateX(-2px) translateY(-2px) rotate(45deg) ;
}

.ham-line1 {
	width: 30px;
	height: 5px;
	background: black;
	border-radius: 20px;
	margin-bottom: 5px;
	transition: all .2s ease-in-out;
}

.ham-line2 {
	width: 30px;
	height: 5px;
	background: black;
	margin-bottom: 5px;
	border-radius: 20px;
}

.ham-line3 {
	width: 30px;
	height: 5px;
	background: black;
	border-radius: 20px;
	transition: all .2s ease-in-out;
}