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="bento-menu">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<p>BENTO MENU</p>
</div>
<div class="kebab-menu">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<p>KEBAB MENU</p>
</div>
<div class="meatball-menu">
<span></span>
<span></span>
<span></span>
<p>MEATBALL 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;
}
.bento-menu{
width: 250px;
height: 250px;
position: absolute;
top: 50%;
left: 10%;
transform: translateY(-50%);
}
.bento-menu span{
width: 70px;
height: 70px;
background: #fff;
position: absolute;
}
.bento-menu span:nth-child(1){
top: 0;
left: 0;
transition: .6s;
}
.bento-menu span:nth-child(2){
top: 0;
left: 88px;
transition: .6s;
}
.bento-menu span:nth-child(3){
top: 0;
left:175px;
transition: .6s;
}
.bento-menu span:nth-child(4){
top: 88px;
left: 0;
transition: .6s;
}
.bento-menu span:nth-child(5){
top: 88px;
left: 88px;
transition: .6s;
}
.bento-menu span:nth-child(6){
top: 88px;
left:175px;
transition: .6s;
}
.bento-menu span:nth-child(7){
top: 175px;
left: 0;
transition: .6s;
}
.bento-menu span:nth-child(8){
top: 175px;
left: 88px;
transition: .6s;
}
.bento-menu span:nth-child(9){
top: 175px;
left:175px;
transition: .6s;
}
.bento-menu:hover span:nth-child(1){
transform: translate(88px,88px);
}
.bento-menu:hover span:nth-child(3){
transform: translate(-88px,88px);
}
.bento-menu:hover span:nth-child(7){
transform: translate(88px,-88px);
}
.bento-menu:hover span:nth-child(9){
transform: translate(-88px,-88px);
}
.bento-menu:hover span:nth-child(2){
transform: rotate(180deg);
}
.bento-menu:hover span:nth-child(4){
transform: rotate(180deg);
}
.bento-menu:hover span:nth-child(6){
transform: rotate(-180deg);
}
.bento-menu:hover span:nth-child(8){
transform: rotate(-180deg);
}
/*============================================================*/
.kebab-menu{
width: 250px;
height: 250px;
position: absolute;
top: 50%;
left: 40%;
transform: translateY(-50%);
}
.kebab-menu span{
width: 70px;
height: 70px;
border-radius: 50%;
background: #fff;
position: absolute;
}
.kebab-menu span:nth-child(1){
top: 0px;
left: 35%;
transition: .6s;
}
.kebab-menu span:nth-child(2){
top: 0px;
left: 35%;
transition: .6s;
}
.kebab-menu span:nth-child(3){
top: 88px;
left: 35%;
transition: .6s;
}
.kebab-menu span:nth-child(4){
top: 175px;
left: 35%;
transition: .6s;
}
.kebab-menu span:nth-child(5){
top: 175px;
left: 35%;
transition: .6s;
}
.kebab-menu:hover span:nth-child(1){
transform: translate(70px,15px);
}
.kebab-menu:hover span:nth-child(2){
transform: translate(-70px,15px);
}
.kebab-menu:hover span:nth-child(4){
transform: translate(-70px,-15px);
}
.kebab-menu:hover span:nth-child(5){
transform: translate(70px,-15px);
}
/*============================================================*/
.meatball-menu{
width: 250px;
height: 250px;
position: absolute;
top: 50%;
left: 70%;
transform: translateY(-50%);
}
.meatball-menu span{
width: 70px;
height: 70px;
border-radius: 50%;
background: #fff;
position: absolute;
}
.meatball-menu span:nth-child(1){
top:35%;
left: 0%;
transition: .6s;
}
.meatball-menu span:nth-child(2){
top: 35%;
left: 35%;
}
.meatball-menu span:nth-child(3){
top: 35%;
left: 72%;
transition: .6s;
}
.meatball-menu:hover span:nth-child(1){
transform: translate(15px,-85px);
}
.meatball-menu:hover span:nth-child(3){
transform: translate(-15px,85px);
}
p{
position: absolute;
top: 270px;
width: 200px;
text-align: center;
left: 20px;
color: darkorange;
}
TrueCodes 
Leave a comment