I saw this reel https://www.instagram.com/p/CcyXukODe9D/
Done it as the video but it does not work the animation. I think something with the JS is not working, because the rest works ok.
Maybe i have to link the JavaScript in another way
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Prueba menu</title>
<link rel="stylesheet" type="text/css" href="estilo.css">
<script src="animation.js" type="text/javascript"></script>
</head>
<body>
<div class="cuadrado" >
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
</body>
</html>
.cuadrado{
background-color:coral ;
width: 80px;
height: 80px;
border-radius: 8px;
display: flex;
flex-direction: column;
gap: 8px;
justify-content: center;
align-items: center;
}
.line{
background-color: white;
width: 48px;
height: 6px;
border-radius: 3px;
transition: 0.5s;
}
.active .line:nth-child(1) {
transform: translateY(12px) rotate(135deg);
}
.active .line:nth-child(2){
transform: scale(0);
}
.active .line:nth-child(3){
transform: translateY(-16px) rotate(-135deg);
}
let cuadrado = document.querySelector(".cuadrado");
cuadrado.addEventListener("click", () =>
cuadrado.classList.toggle("active"));