HTML CODE:
<!DOCTYPE html>
<html>
<head>
<title>page</title>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" type="text/css" href="1.page.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css">
</head>
<body>
<div class="hamburger">
<span ></span>
<span></span>
<span></span>
<p>HAMBURGER MENU</p>
</div>
<div class="doner">
<span></span>
<span></span>
<span></span>
<p>DONER MENU</p>
</div>
</body>
</html>
CSS CODE:
@import url('https://fonts.googleapis.com/css?family=Chakra+Petch:600');
body{
margin: 50px;
padding: 0;
background: #262626;
font-family: 'Chakra Petch', sans-serif;
font-size: 36px;
}
.hamburger{
width: 300px;
height:270px;
position: absolute;
top:40%;
left:25%;
transform: translateY(-40%);
}
.hamburger span{
position: absolute;
width: 300px;
height: 50px;
background-color: white;
}
.hamburger span:nth-child(1){
top: 0px;
transition: .5s
}
.hamburger span:nth-child(2){
top:100px;
transition: .1s;
}
.hamburger span:nth-child(3){
top: 200px;
transition: .5s
}
.hamburger:hover span:nth-child(1){
position: absolute;
transform: rotate(45deg) translate(80px,80px);
transition: 1s ease-in-out;
}
.hamburger:hover span:nth-child(2){
opacity: 0;
}
.hamburger:hover span:nth-child(3){
position: absolute;
transform: rotate(315deg) translate(50px,-70px);
transition: 1s ease-in-out;
}
p{
position: absolute;
bottom: -200px;
color: darkorange;
text-align: center;
width: 200px;
margin-left: 40px;
}
.doner{
width: 300px;
height:270px;
position: absolute;
top:40%;
left:60%;
transform: translateY(-40%);
}
.doner span{
height: 50px;
width: 300px;
background-color: white;
position: absolute;
}
.doner span:nth-child(1){
top: 0px;
width: 300px;
transition: .5s
}
.doner span:nth-child(2){
top: 100px;
width: 200px;
left: 50%;
transform: translateX(-50%);
transition: 1s;
}
.doner span:nth-child(3){
top: 200px;
width: 100px;
left: 50%;
transform: translateX(-50%);
transition: .5s
}
.doner:hover span:nth-child(1){
position: absolute;
transform: rotate(45deg) translate(80px,80px);
transition: 1s ease-in-out;
}
.doner:hover span:nth-child(2){
opacity: 0;
transform: rotate(90deg) translateY(110px) scaleX(2);
}
.doner:hover span:nth-child(3){
position: absolute;
transform: rotate(-45deg) translate(-55px,-180px);
transition: 1s ease-in-out;
width: 300px;
}
TrueCodes 
Leave a comment