diff --git a/HamburgerAnimation/Readme.md b/HamburgerAnimation/Readme.md new file mode 100644 index 0000000..438fa23 --- /dev/null +++ b/HamburgerAnimation/Readme.md @@ -0,0 +1,3 @@ +# Hamburger Animation + + diff --git a/HamburgerAnimation/index.html b/HamburgerAnimation/index.html new file mode 100644 index 0000000..6128324 --- /dev/null +++ b/HamburgerAnimation/index.html @@ -0,0 +1,26 @@ + + + + + + + + Hamburger Animation + + +

Hamburger Animation

+
+
+
+
+
+
+
+ + + + + diff --git a/HamburgerAnimation/pro.png b/HamburgerAnimation/pro.png new file mode 100644 index 0000000..1960ca7 Binary files /dev/null and b/HamburgerAnimation/pro.png differ diff --git a/HamburgerAnimation/script.js b/HamburgerAnimation/script.js new file mode 100644 index 0000000..7ce2812 --- /dev/null +++ b/HamburgerAnimation/script.js @@ -0,0 +1,7 @@ +const line = document.querySelectorAll(".line"); +const hamBurger = document.querySelector(".hamburger"); +hamBurger.addEventListener("click", () => { + line.forEach((Element) => { + Element.classList.toggle("active_line"); + }); +}); diff --git a/HamburgerAnimation/style.css b/HamburgerAnimation/style.css new file mode 100644 index 0000000..0f2a4c4 --- /dev/null +++ b/HamburgerAnimation/style.css @@ -0,0 +1,88 @@ +* { + margin: 0; + padding: 0; +} +body { + height: 100vh; + width: 100%; + overflow: hidden; + background-color: #345b63; + display: flex; + justify-content: center; + align-items: center; + font-family: sans-serif; +} +h1 { + color: white; + position: absolute; + top: 10px; + text-align: center; +} +.box { + width: 200px; + height: 200px; + background-color: #d4ecdd71; + border-radius: 5px; + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + -ms-border-radius: 5px; + -o-border-radius: 5px; + box-shadow: inset 0px 0px 10px black; + display: flex; + justify-content: center; + align-items: center; +} +.hamburger { + cursor: pointer; + width: 140px; + height: 100px; +} +.line { + border-radius: 4px; + width: 100px; + height: 4px; + background-color: black; + margin: 20px 0px; + transition: 0.3s; + -webkit-transition: 0.3s; + -moz-transition: 0.3s; + -ms-transition: 0.3s; + -o-transition: 0.3s; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + -ms-border-radius: 4px; + -o-border-radius: 4px; +} +.line:nth-child(1) { + width: 50px; +} +.line:nth-child(2) { + width: 140px; +} +.active_line:nth-child(1) { + transform: translate(17.5px, -5px) rotate(50deg); + -webkit-transform: translate(17.5px, -5px) rotate(50deg); + -moz-transform: translate(17.5px, -5px) rotate(50deg); + -ms-transform: translate(17.5px, -5px) rotate(50deg); + -o-transform: translate(17.5px, -5px) rotate(50deg); +} +.active_line:nth-child(2) { + transform: rotate(-50deg); + -webkit-transform: rotate(-50deg); + -moz-transform: rotate(-50deg); + -ms-transform: rotate(-50deg); + -o-transform: rotate(-50deg); +} +.active_line:nth-child(3) { + transform: translate(33px, -5px) rotate(50deg); + -webkit-transform: translate(33px, -5px) rotate(50deg); + -moz-transform: translate(33px, -5px) rotate(50deg); + -ms-transform: translate(33px, -5px) rotate(50deg); + -o-transform: translate(33px, -5px) rotate(50deg); +} +footer { + position: absolute; + bottom: 5px; + left: 5px; + color: white; +} diff --git a/README.md b/README.md index cd6926d..2de3d3c 100644 --- a/README.md +++ b/README.md @@ -34,13 +34,14 @@ | Wave Animation | https://pulkit203.github.io/Wave-Animation/ | | Menu Hover effect Animation | https://lavishbansal17.github.io/Menu-Hover-Effect/ | | Button Animation | https://palaksharma23.github.io/AnimatedButton/ | -| Ring of Fire | https://lavishbansal17.github.io/Ring-of-fire/ | +| Ring of Fire | https://lavishbansal17.github.io/Ring-of-fire/ | | Moon Light | https://iamtushar11.github.io/MoonLight-Parallex-Effect/ | | Modal Animation | https://pulkit203.github.io/Modal-Animation/ | -| Gradient Drop Shadow | https://lavishbansal17.github.io/Gradient-Drop-Box/ | -| Text Animation Effect | https://lavishbansal17.github.io/Text-Animation-Effect/ | +| Gradient Drop Shadow | https://lavishbansal17.github.io/Gradient-Drop-Box/ | +| Text Animation Effect | https://lavishbansal17.github.io/Text-Animation-Effect/ | | Animation Balls | https://pulkit203.github.io/Windows-Loading-Animation/ | -| Line Icon Effect | https://lavishbansal17.github.io/Line-Icon-Effect/ +| Line Icon Effect | https://lavishbansal17.github.io/Line-Icon-Effect/ | +| Hamburger Animation | https://pulkit203.github.io/Hamburger-Animtion/ | --- diff --git a/loadingBallsAnimation/index.html b/loadingBallsAnimation/index.html index 98218d2..8de6ac8 100644 --- a/loadingBallsAnimation/index.html +++ b/loadingBallsAnimation/index.html @@ -17,5 +17,9 @@

Window'10 Loading Animation

+ diff --git a/loadingBallsAnimation/style.css b/loadingBallsAnimation/style.css index c346913..eaa59b9 100644 --- a/loadingBallsAnimation/style.css +++ b/loadingBallsAnimation/style.css @@ -86,3 +86,9 @@ h1 { margin: auto; } } +footer { + position: absolute; + bottom: 5px; + left: 5px; + color: white; +}