Loading
.
.
.
We use cookies to personalize ads and analyze traffic. By continuing to browse the site, you agree to our Privacy Policy. You can also choose to reject cookies.
The content on this website, including videos and code examples, is for educational purposes only. All demonstrations and designs are fictional and created to illustrate coding techniques. Any resemblance to existing websites or brands is purely coincidental.
The creators and administrators of this website do not claim ownership or affiliation with any existing websites or companies. Users are encouraged to use the information responsibly for learning purposes. Liability for any misuse of the content provided is not accepted.
Below is the html code for this video.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hamburger Animation</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="hamburger is-open" id="hamburger">
<div class="hamburger-icon">
<div class="hamburger-container">
<span class="hamburger-top-bun"></span>
<span class="hamburger-filling"></span>
<span class="hamburger-bottom-bun"></span>
</div>
</div>
<div class="hamburger-ring">
<svg class="circular-ring">
<path class="path" fill="none" stroke="#ffffff" stroke-miterlimit="10" stroke-width="4"
d="M 34 2 C 16.3 2 2 16.3 2 34 s 14.3 32 32 32 s 32 -14.3 32 -32 S 51.7 2 34 2" />
</svg>
</div>
<svg width="0" height="0">
<mask id="mask">
<path xmlns="http://www.w3.org/2000/svg" fill="none" stroke="#ffffff" stroke-miterlimit="10"
stroke-width="4" d="M 34 2 c 11.6 0 21.8 6.2 27.4 15.5 c 2.9 4.8 5 16.5 -9.4 16.5 h -4" />
</mask>
</svg>
<div class="hamburger-path">
<div class="animated-path">
<div class="circular-path"></div>
</div>
</div>
</div>
<script src="index.js"></script>
</body>
</html>Below is the css code for this video.
style.css
*, *::after, *::before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 100vh;
width: 100%;
background: #00a693;
}
.hamburger {
position: relative;
display: block;
width: 68px;
height: 68px;
transform: scale(2);
margin: 45vh auto 0;
cursor: pointer;
}
.hamburger-icon {
position: absolute;
height: 68px;
width: 68px;
padding: 20px 16px;
}
.hamburger-container {
position: relative;
height: 28px;
width: 36px;
}
.hamburger-top-bun, .hamburger-bottom-bun, .hamburger-filling {
position: absolute;
display: block;
height: 4px;
width: 36px;
background: #ffffff;
border-radius: 4px;
}
.hamburger-top-bun {
top: 0;
transform-origin: 34px 2px;
}
.hamburger-bottom-bun {
bottom: 0;
transform-origin: 34px 2px;
}
.hamburger-filling {
top: 12px;
}
.hamburger-ring {
position: absolute;
top: 0;
left: 0;
height: 68px;
width: 68px;
}
.circular-ring {
height: 68px;
width: 68px;
}
.path {
stroke-dasharray: 240;
stroke-dashoffset: 240;
stroke-linejoin: round;
}
.hamburger-path {
position: absolute;
top: 0;
left: 0;
height: 68px;
width: 68px;
mask: url(#mask);
-webkit-mask-box-image: url(https://raygun.io/upload/mask.svg);
}
.animated-path {
position: absolute;
top: 0;
left: 0;
width: 68px;
height: 68px;
}
.circular-path {
height: 34px;
width: 34px;
transform: rotate(0deg);
transform-origin: 100% 0;
margin: 34px 34px 0 0;
}
.circular-path::before {
content: "";
display: block;
height: 34px;
width: 34px;
background: #ffffff;
margin: 0 4px 0 0;
}
.hamburger.is-open .path {
animation: dashInAnim 0.75s linear normal forwards;
}
@keyframes dashInAnim {
0%, 40% {
stroke-dashoffset: 240;
}
100% {
stroke-dashoffset: 0;
}
}
.hamburger.is-open .animated-path {
animation: rotateInAnim 0.75s linear normal forwards;
}
@keyframes rotateInAnim {
0% {
transform: rotate(360deg);
}
40% {
transform: rotate(180deg);
}
100% {
transform: rotate(0deg);
}
}
.hamburger.is-closed .path {
animation: dashOutAnim 0.75s linear normal forwards;
}
@keyframes dashOutAnim {
0% {
stroke-dashoffset: 0;
}
40%, 100% {
stroke-dashoffset: 240;
}
}
.hamburger.is-closed .animated-path {
animation: rotateOutAnim 0.75s linear normal forwards;
}
@keyframes rotateOutAnim {
0% {
transform: rotate(0deg);
}
40% {
transform: rotate(180deg);
}
100% {
transform: rotate(360deg);
}
}
.hamburger.is-open .hamburger-top-bun {
animation: topBunOutAnim 0.75s linear normal forwards;
}
@keyframes topBunOutAnim {
0% {
top: 0;
left: 0;
transform: rotate(0deg);
}
20% {
top: 0;
left: 0;
transform: rotate(15deg);
}
80% {
top: 0;
left: -5px;
transform: rotate(-60deg);
}
100% {
top: 1px;
left: -5px;
transform: rotate(-45deg);
}
}
.hamburger.is-open .hamburger-bottom-bun {
animation: bottomBunOutAnim 0.75s linear normal forwards;
}
@keyframes bottomBunOutAnim {
0% {
left: 0;
transform: rotate(0deg);
}
20% {
left: 0;
transform: rotate(-15deg);
}
80% {
left: -5px;
transform: rotate(60deg);
}
100% {
left: -5px;
transform: rotate(45deg);
}
}
.hamburger.is-closed .hamburger-top-bun {
animation: topBunInAnim 0.75s linear normal forwards;
}
@keyframes topBunInAnim {
0% {
left: -5px;
bottom: 0;
transform: rotate(-45deg);
}
20% {
left: -5px;
bottom: 0;
transform: rotate(-60deg);
}
80% {
left: 0;
bottom: 0;
transform: rotate(15deg);
}
100% {
left: 0;
bottom: 1px;
transform: rotate(0deg);
}
}
.hamburger.is-closed .hamburger-bottom-bun {
animation: bottomBunInAnim 0.75s linear normal forwards;
}
@keyframes bottomBunInAnim {
0% {
left: -5px;
transform: rotate(45deg);
}
20% {
left: -5px;
bottom: 0;
transform: rotate(60deg);
}
80% {
left: 0;
bottom: 0;
transform: rotate(-15deg);
}
100% {
left: 0;
transform: rotate(0deg);
}
}
.hamburger.is-open .hamburger-filling {
animation: hamburgerFillOutAnim 0.75s linear normal forwards;
}
@keyframes hamburgerFillOutAnim {
0% {
left: 0;
width: 36px;
}
20% {
left: -6px;
width: 42px;
}
40% {
left: 40px;
width: 0;
}
100% {
left: 36px;
width: 0;
}
}
.hamburger.is-closed .hamburger-filling {
animation: hamburgerFillInAnim 0.75s linear normal forwards;
}
@keyframes hamburgerFillInAnim {
0% {
left: 36px;
width: 0;
}
40% {
left: 40px;
width: 0;
}
80% {
left: -6px;
width: 36px;
}
100% {
left: 0;
width: 36px;
}
}Below is the javascript code for this video.
index.js
document.addEventListener("DOMContentLoaded", function () {
var hamburger = document.querySelector("#hamburger");
var isRingVisible = true;
hamburger.addEventListener("click", function () {
if (isRingVisible) {
hamburger.classList.remove("is-open");
hamburger.classList.add("is-closed");
isRingVisible = false;
} else {
hamburger.classList.remove("is-closed");
hamburger.classList.add("is-open");
isRingVisible = true;
}
});
});Thanks for visiting