From 9b10fa7ea86a6a4345cbdf57d18d82d2c15163c2 Mon Sep 17 00:00:00 2001 From: Daksh Date: Sun, 9 Oct 2022 09:45:33 +0530 Subject: [PATCH] Added hamburger menu animation --- Hover animation/index.html | 13 +++++++++++ Hover animation/style.css | 48 ++++++++++++++++++++++++++++++++++++++ 2 files changed, 61 insertions(+) create mode 100644 Hover animation/index.html create mode 100644 Hover animation/style.css diff --git a/Hover animation/index.html b/Hover animation/index.html new file mode 100644 index 0000000..5089120 --- /dev/null +++ b/Hover animation/index.html @@ -0,0 +1,13 @@ + + + + +
+
+
+
+
+
+
+ + \ No newline at end of file diff --git a/Hover animation/style.css b/Hover animation/style.css new file mode 100644 index 0000000..c25bc32 --- /dev/null +++ b/Hover animation/style.css @@ -0,0 +1,48 @@ +*{ + margin: 0; + padding: 0; + box-sizing: border-box; +} +.container{ + width: 100%; + height: 100vh; + display: flex; + justify-content: center; + align-items: center; + background-color: beige ; +} +.burger{ + width: 120px; + height: 120px; + background-color: beige ; + box-shadow: 0px 10px 10px rgba(0,0,0,0.1); + /* box shadow -> right left blur color(percent) */ + border-radius: 8px; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + cursor: pointer +} +.container .burger .bar{ + width: 80px; + height: 6px; + background-color: rgb(47, 47, 47); + margin: 12px; + border-radius: 6px; + transition: all 200ms ease-in-out; +} +.burger:hover .bar1{ + + transform: translateY(30px) rotateZ(45deg); + +} +.burger:hover .bar3{ + + transform: translateY(-30px) rotateZ(-45deg); + +} +.burger:hover .bar2{ + transform: scale(0); + +} \ No newline at end of file