Sidebar icon with animation || Icon interaction HTML
Here is the code for designing an animation of the sidebar icon. This icon is helpful for the use of sidebar menus . With the effect of rounding opening and closing codoblog brings the video of the icon interaction for you.
#CODE :
<!DOCTYPE html>
<html>
<head>
<title>Icon menu</title>
<style type="text/css">
body{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
margin: 0;
font-family: sans-serif;
font-weight: bold;
flex-direction: column;
}
p{
font-size: 2.5rem;
text-transform: uppercase;
}
svg{
stroke-linecap: round;
stroke-linejoin: round;
transition: transform 400ms;
cursor: pointer;
-webkit-tap-highlight-color:rgba(0,0,0,0);
}
svg path{
fill: none;
stroke: black;
stroke-width:2px;
transition:stroke-dasharray 400ms,stroke-dashoffset 400ms;
}
svg.active{
transform: rotate(-45deg);
}
#top{
stroke-dasharray: 59, 158.08;
}
#bottom{stroke-dasharray: 59, 218.95;
}
svg.active #top{
stroke-dashoffset:-110px;
}
svg.active #bottom{
stroke-dashoffset:-151px;
}
</style>
</head>
<body>
<svg viewBox="0 0 64 81"
onclick="this.classList.toggle('active')"
width="100">
<g transform="matrix(1,0,0,1,-319.976,-199.747)">
<g transform="matrix(1,0,0,1,0.158581,0.510367)">
<path
d="M320.317,219.335L379.52,219.335C379.52,219.335 380.06,199.994 350.531,199.737C350.368,199.735 349.922,259.74 349.922,259.74"
id="top"
/>
</g>
<g transform="matrix(1,0,0,1,0.158581,0.510367)">
<path d="M320.317,239.75L379.527,239.75" id="middle" />
</g>
<g transform="matrix(1,0,0,1,0.158581,0.510367)">
<path
d="M320.317,259.74L379.527,259.74C388.512,217.303 377.34,199.617 350.448,199.737L349.922,279.557"
id="bottom"
/>
</g>
</g>
</svg>
<p>Click on the menu</p>
</body>
</html>
#OUTPUT :
After Clicking
Comments
Post a Comment