Merge pull request #311 from shreenarayan123/#158/Growing-flower

#158/growing flower
you-dont-need · Oct 22, 2023 · 701e8fd · 701e8fd
2 parents aa8596e + 5503910
commit 701e8fd
Show file tree

Hide file tree

Showing 7 changed files with 108 additions and 1 deletion.
diff --git a/Growing-flower/growing.css b/Growing-flower/growing.css
@@ -0,0 +1,82 @@
+
+body {
+    margin:0;
+    height:100vh;
+    display:grid;
+    place-items:center;
+    background:lightblue;
+    overflow:hidden;
+  }
+  .growing {
+    width:150px;
+    height:150px;
+    position:relative;
+    clip-path:inset(-100vh 0);
+  }
+  .growing:before {
+    content:"";
+    display:block;
+    width:400%;
+    height:100%;
+    background:
+      /*1*/
+      radial-gradient(farthest-side,#639510 97%,#0000) 12.5% 65%/12px 9px,
+      linear-gradient(#996b52 0 0) 9% 80%/9.4% 9%,
+      linear-gradient(#996b52 0 0) 10% 100%/7% 25%,
+      linear-gradient(#639510 0 0) 12.5% 100%/5px 36%,   
+      /*2*/    
+      radial-gradient(farthest-side,#639510 97%,#0000) 35.5% 50%/15px 10px,
+      radial-gradient(farthest-side,#639510 97%,#0000) 38% 64%/15px 10px ,
+      linear-gradient(#996b52 0 0) 35.5% 80%/9.4% 9%,
+      linear-gradient(#996b52 0 0) 36% 100%/7% 25%,
+      linear-gradient(#639510 0 0) 37% 100%/5px 52%,    
+      /*3*/
+      radial-gradient(farthest-side,#fb3e4c 98%,#0000) 64.5% 40.5%/10px 9px,
+      radial-gradient(farthest-side at bottom,#0000 calc(100% - 5px),#639510 0 100%,#0000)63.6% 34%/20px 10px,
+      radial-gradient(farthest-side,#639510 97%,#0000) 61% 50%/15px 10px,
+      radial-gradient(farthest-side,#639510 97%,#0000) 63.5% 64%/15px 10px ,
+      linear-gradient(#996b52 0 0) 63.5% 80%/9.4% 9%,
+      linear-gradient(#996b52 0 0) 63.1% 100%/7% 25%,
+      linear-gradient(#639510 0 0) 62% 100%/5px 62%,
+      /*4*/
+      radial-gradient(farthest-side at 50% 4px,#fb3e4c 98%,#0000) 88.1% 17.5%/17px 13px,
+      radial-gradient(farthest-side,#639510 97%,#0000) 87% 50%/15px 10px,
+      radial-gradient(farthest-side,#639510 97%,#0000) 89.5% 38%/15px 10px,
+      radial-gradient(farthest-side,#639510 97%,#0000) 89.5% 64%/15px 10px,
+      linear-gradient(#996b52 0 0) 91% 80%/9.4% 9%,
+      linear-gradient(#996b52 0 0) 90% 100%/7% 25%,
+      linear-gradient(#639510 0 0) 87.5% 100%/5px 77%;
+    background-repeat:no-repeat;
+    animation:m 4s .5s both;
+  }
+  .growing:after {
+      content: "";
+      position: absolute;
+      inset: -100vh 49px 42px 54px;
+      background: 
+        conic-gradient(at 2px 50%,#0000 270deg,#fff 0)0 0/8px 10px,
+        conic-gradient(at 2px 50%,#0000 270deg,#fff 0)4px 5px/8px 10px;
+    animation:s 4s .5s both;
+  }
+
+  @keyframes m{
+    0%,20%  {transform:translate(0%)}
+    33.33%,53.33% {transform:translate(-24%)}
+    66.66%,86.66% {transform:translate(-49.5%)}
+    100%{transform:translate(-74.5%)}
+  }
+
+  @keyframes s {
+    0% {inset: -100vh 49px 100vh 54px}
+    10% {inset: -100vh 49px 42px 54px;opacity:1}
+    20% {inset: -100vh 49px 42px 54px;opacity:0}
+    20.01%,
+    33.33% {inset: -100vh 49px 100vh 54px;opacity:1}
+    43.33% {inset: -100vh 49px 42px 54px;opacity:1}
+    53.33% {inset: -100vh 49px 42px 54px;opacity:0}
+    53.34%,
+    66.66% {inset: -100vh 49px 100vh 54px;opacity:1}
+    76.66% {inset: -100vh 49px 42px 54px;opacity:1}
+    86.66%,
+    100%{inset: -100vh 49px 42px 54px;opacity:0}
+  }
diff --git a/Growing-flower/growing.html b/Growing-flower/growing.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="./growing.css">
+
+    <title> Cool Animation</title>
+</head>
+<body>
+    <div class="growing"></div>
+</body>
+</html>
diff --git a/README.md b/README.md
@@ -73,6 +73,7 @@ Please be aware that the demos may exhibit significant accessibility issues, suc
   - [ Zoom when hover](#-zoom-when-hover)
   - [Floating Labels V2](#Floating-labelV2)
   - [Scary animation](#scary-animation)
+  - [growing-flower](#growing-flower)
 =======
 
   - [Contributors](#contributors)
@@ -84,6 +85,7 @@ Please be aware that the demos may exhibit significant accessibility issues, suc
   - [Contributing](#contributing)
 
 
+
 =====
 ## <a id="Accordion"></a>Accordion / Toggle
 
@@ -506,7 +508,6 @@ Please be aware that the demos may exhibit significant accessibility issues, suc
 [<img src="images/shuffling-squares.gif" height="230" title="Shuffling squares">](https://im3.ezgif.com/tmp/ezgif-3-41efb679c2.gif)
 
 
-
 ---
 ## <a id="Floating-labelV2"></a>Floating-labelV2
 [<img src="images/Floatinglabel2.gif" height="230" title="Floating-labelV2">](https://im2.ezgif.com/tmp/ezgif-2-3297933621.gif)
@@ -516,10 +517,21 @@ Please be aware that the demos may exhibit significant accessibility issues, suc
 ---
 ---
 ## <a id="scary-animation"></a>scary-animation
+
+[<img src="images/Scary-animation.gif" height="230" title="scary-animation">](https://im4.ezgif.com/tmp/ezgif-4-04e4dfec68.gif)
+
+**[⬆ back to top](#quick-links)**
+
+---
+---
+## <a id="growing-flower"></a>growing-flower
+[<img src="images/growing-flower.gif" height="230" title="growing-flower">](https://im3.ezgif.com/tmp/ezgif-3-f53ebce80a.gif)
+=======
 [<img src="images/Scary-animation.gif" height="230" title="Floating-labelV2">](https://im4.ezgif.com/tmp/ezgif-4-04e4dfec68.gif)
 
 =======
 
+
 **[⬆ back to top](#quick-links)**
 
 ---

diff --git a/growing-flower-1.gif b/growing-flower-1.gif
diff --git a/growing-flower.gif b/growing-flower.gif
diff --git a/images/growing-flower - Copy.gif b/images/growing-flower - Copy.gif
diff --git a/images/growing-flower.gif b/images/growing-flower.gif