Hice el ícono animado :D con lo que aprendido de before y after de css en la clase Sombras realistas (shadows) :
- HTML:
<div class="icon-container">
<div class="icon-menu">
<div class="icon-initial"></div>
</div>
</div>- CSS:
/* ICONS ANIMATION TOOGLE */
.icon-container{
display: inline-block;
vertical-align: middle;
padding: 0px 15px;
}
.icon-menu{
height: 15px;
width: 15px;
display: flex;
align-items: center;
position: relative;
cursor: pointer;
}
.icon-menu .icon-initial{
height: 0.1em;
width: 100%;
background-color: white;
transition:0.5s;
}
.icon-menu .icon-initial::before, .icon-menu .icon-initial::after{
content: "";
position: absolute;
height: 0.1em;
width: 100%;
background-color: white;
left: 0;
top: 0px;
transition:0.5s;
}
.icon-menu .icon-initial::after{
top:90%;
background-color: white;
transition:0.5s;
}
/* animations icon */
.icon-menu.active .icon-initial{
background-color: transparent;
}
.icon-menu.active .icon-initial::before{
transform: rotate(-45deg);
top: 45%;
}
.icon-menu.active .icon-initial::after{
transform: rotate(45deg);
top: 45%;
}- JS:
(() => {
let icon = document.querySelector('.icon-menu');
let toggle = false;
icon.addEventListener('click', function () {
toggle = !toggle;
if (toggle)
icon.classList.add('active');
else
icon.classList.remove('active');
});
})();