From 5d63c6acf0c9b751cceebd78dcb569967020f297 Mon Sep 17 00:00:00 2001 From: chhaya sinha Date: Fri, 6 Feb 2026 23:15:01 +0530 Subject: [PATCH] add blossoming flower --- blossoming flower/index.html | 24 ++++++++++++++++++ blossoming flower/script.js | 5 ++++ blossoming flower/style.css | 49 ++++++++++++++++++++++++++++++++++++ 3 files changed, 78 insertions(+) create mode 100644 blossoming flower/index.html create mode 100644 blossoming flower/script.js create mode 100644 blossoming flower/style.css diff --git a/blossoming flower/index.html b/blossoming flower/index.html new file mode 100644 index 0000000..5c4610b --- /dev/null +++ b/blossoming flower/index.html @@ -0,0 +1,24 @@ + + + + + + Flower Blossom Animation + + + + +
+
+
+
+
+
+
+
+
+
+ + + + diff --git a/blossoming flower/script.js b/blossoming flower/script.js new file mode 100644 index 0000000..41e465f --- /dev/null +++ b/blossoming flower/script.js @@ -0,0 +1,5 @@ + +window.addEventListener("load", () => { + const flower = document.getElementById("flower"); + flower.classList.add("open"); +}); diff --git a/blossoming flower/style.css b/blossoming flower/style.css new file mode 100644 index 0000000..e3bb4fb --- /dev/null +++ b/blossoming flower/style.css @@ -0,0 +1,49 @@ + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + background: #0f172a; +} + +.flower { + position: relative; + width: 200px; + height: 200px; +} + +.petal { + position: absolute; + width: 60px; + height: 120px; + background: radial-gradient(circle at top, #ff9ad5, #e11d48); + border-radius: 50%; + top: 40px; + left: 70px; + transform-origin: bottom center; + transform: scale(0.2) rotate(0deg); + transition: transform 10s ease-in-out; +} + +/* Petal angles */ +.petal:nth-child(1) { --angle: 0deg; } +.petal:nth-child(2) { --angle: 45deg; } +.petal:nth-child(3) { --angle: 90deg; } +.petal:nth-child(4) { --angle: 135deg; } +.petal:nth-child(5) { --angle: 180deg; } +.petal:nth-child(6) { --angle: 225deg; } +.petal:nth-child(7) { --angle: 270deg; } +.petal:nth-child(8) { --angle: 315deg; } + +.flower.open .petal { + transform: scale(1) rotate(var(--angle)); +} + +