From e21cdc18b9c1ef3b5f65ba733decb15228f5272b Mon Sep 17 00:00:00 2001
From: "john.stalin" <75026232+abhinavjha0239@users.noreply.github.com>
Date: Sun, 29 Dec 2024 17:35:13 +0530
Subject: [PATCH] Animated Flower
---
Flowers/index.css | 721 +++++++++++++++++++++++++++++++++++++++++++++
Flowers/index.html | 55 ++++
2 files changed, 776 insertions(+)
create mode 100644 Flowers/index.css
create mode 100644 Flowers/index.html
diff --git a/Flowers/index.css b/Flowers/index.css
new file mode 100644
index 00000000..39799c5c
--- /dev/null
+++ b/Flowers/index.css
@@ -0,0 +1,721 @@
+*,
+*::after,
+*::before{
+ padding: 0;
+ margin: 0;
+ box-sizing: border-box;
+}
+
+:root{
+ --color-bg: linear-gradient(to top,#010329,#000005);
+ --color-glass:linear-gradient(to left,#142544,#1a9092);
+ --color-water:linear-gradient(to left,#142544,#1b6d6e);
+}
+
+body{
+ background-image:var(--color-bg);
+ min-height: 100vh;
+ display: flex;
+ justify-content: center;
+ align-items:flex-end;
+ overflow: hidden;
+}
+
+.flower{
+ position: relative;
+}
+
+.flower__glass{
+ width:20vmin;
+ height: 30vmin;
+ background-image: var(--color-glass);
+ clip-path: polygon(0 0, 100% 0, 85% 100%, 15% 100%);
+ opacity: .8;
+ position: relative;
+}
+
+.flower__glass::after{
+ content: '';
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ background-color: #182843;
+ width: 100%;
+ height: 2vmin;
+}
+
+.flower__glass::before{
+ content: '';
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ background-image: var(--color-water);
+ width: 100%;
+ height: 15vmin;
+}
+
+.f-wrapper{
+ position: absolute;
+ left: 45%;
+ bottom: 2vmin;
+}
+
+.f-wrapper--2{
+ left: 50%;
+ bottom: 5%;
+ transform-origin: 10% left;
+ transform: rotate(20deg);
+}
+
+.f-wrapper--3{
+ left: 30%;
+ bottom: 5%;
+ transform-origin: 10% left;
+ transform: rotate(-10deg);
+}
+
+.f-wrapper--3 .flower__line{
+ height: 45vmin;
+ position: relative;
+}
+
+.f-wrapper--3 .flower__line::after{
+ content: '';
+ position: absolute;
+ left:0;
+ top: 0;
+ width: 6vmin;
+ height: 6vmin;
+ transform: translate(-69%,-30%) rotate(-5deg);
+ border-radius:10vmin 10vmin 0 0;
+ border: 2vmin solid #104d4e;
+ border-bottom: transparent;
+ border-left: transparent;
+}
+
+.f-wrapper--3 .flower__line::before{
+ content: '';
+ position: absolute;
+ left:-40%;
+ top: -1%;
+ width: 6vmin;
+ height: 2vmin;
+ transform-origin: right;
+ transform: translate(-100%,-80%) rotate(-20deg);
+ background-color: #104d4e;
+ border-radius: 2vmin;
+}
+
+.f-wrapper--3 .flower__line{
+ background-image: linear-gradient(to top,#142544,#104d4e);
+}
+
+
+.f-wrapper--2 .flower__line{
+ height: 45vmin;
+}
+
+.f-wrapper--2 .f{
+ transform: translateX(-50%) rotate(20deg);
+}
+
+.f-wrapper--3 .f{
+ transform: translate(-350%,-50%) rotate(-120deg);
+}
+
+.f-wrapper--2 .flower__leaf:not(:first-child){
+ width: 3.8vmin;
+ height: 10vmin;
+ background-image: linear-gradient(to bottom, #ff43b6 ,#c22887, #1a233a 99%);
+}
+
+.f-wrapper--3 .flower__leaf:not(:first-child){
+ width: 3.8vmin;
+ height: 10vmin;
+ background-image: linear-gradient(to bottom, #ad2be0 ,#712291, #1a233a 99%);
+}
+
+.f-wrapper--3 .flower__leaf--1{
+ width: 8vmin;
+ height: 10vmin;
+ bottom: 2vmin;
+ background-color: #ad2be0;
+}
+
+.f-wrapper--2 .flower__leaf--1{
+ width: 8vmin;
+ height: 10vmin;
+ bottom: 2vmin;
+ background-color: #de118b;
+}
+
+.f-wrapper--2 .f .flower__leaf--8{
+ width: 10vmin;
+ height: 9vmin;
+ bottom: 3vmin;
+ left: -30%;
+ transform: rotate(-50deg);
+ background-image: linear-gradient(to left bottom, #ff43b6 ,#4d1337);;
+}
+
+.f-wrapper--3 .f .flower__leaf--8{
+ width: 10vmin;
+ height: 9vmin;
+ left: -10% !important;
+ background-image: linear-gradient(to left bottom, #ad2be0 ,#712291);;
+}
+
+.flower__line{
+ width: 2vmin;
+ height: 56vmin;
+ background-image: linear-gradient(to left top,#82fdff 20%,#142544,#104d4e);
+ border-radius: 4vmin;
+}
+
+.f{
+ position: absolute;
+ top: 1vmin;
+ left: 50%;
+ transform: translateX(-50%) rotate(-10deg);
+ width: 2vmin;
+ height: 2vmin;
+}
+
+
+.flower__leaf{
+ position: absolute;
+ left: 50%;
+ bottom: 2vmin;
+ transform: translateX(-50%);
+ width: 5vmin;
+ height: 14vmin;
+ background-image: linear-gradient(to bottom, #ffa085 ,#fa7373, #1a233a 99%);
+
+ clip-path: ellipse(50% 50% at 50% 50%);
+ transform-origin: center bottom;
+ animation: open-flower 2s 1s backwards;
+}
+
+.flower__leaf--1{
+ width: 10vmin;
+ height: 12vmin;
+ bottom: 3vmin;
+ border-radius: 50% 50% 50% 50% / 80% 80% 20% 20%;
+ background-color: #e24f5f;
+ background-image: none;
+ animation: open-flowe--middle 1.4s 1s backwards;
+}
+
+.flower__leaf--2{
+ transform: translateX(-50%) rotate(-30deg);
+}
+.flower__leaf--3{
+ transform: translateX(-50%) rotate(-50deg);
+}
+.flower__leaf--4{
+ transform: translateX(-50%) rotate(-70deg);
+}
+
+.flower__leaf--5{
+ transform: translateX(-50%) rotate(30deg);
+}
+
+.flower__leaf--6{
+ transform: translateX(-50%) rotate(50deg);
+}
+
+.flower__leaf--7{
+ transform: translateX(-50%) rotate(70deg);
+}
+
+.flower__leaf--8{
+ width: 13vmin;
+ height: 11vmin;
+ bottom: 6vmin;
+ left: -30%;
+ border-radius: none;
+ clip-path: none;
+ border-radius: 10vmin 2vmin 10vmin 2vmin;
+ transform: rotate(-55deg);
+ background-image: linear-gradient(to left bottom, #ffa085 ,#eb8b8b,#492f2f 98%);
+}
+
+.flower__fall-down--yellow{
+ animation: flower-fall-down-yellow 8s 1.2s linear forwards;
+}
+
+.flower__fall-down--pink{
+ animation: flower-fall-down-pink 5s 1.2s linear forwards;
+}
+
+.flower__fall-down--purple{
+ bottom: 4vmin;
+ animation:flower-fall-down-purple 6s 1.2s linear forwards, flower-falling 6s 7.2s linear infinite;
+}
+
+
+@keyframes open-flower{
+ 0%{
+ transform: translateX(-50%) rotate(0);
+ }
+}
+
+@keyframes open-flowe--middle {
+ 0%{
+ opacity: 0;
+ transform: translateX(-50%) scale(0);
+ }
+}
+
+@keyframes flower-fall-down-pink {
+
+ 0%{
+ transform: rotate(-55deg);
+ }
+
+ 50%{
+ transform: rotateX(-100deg);
+ }
+
+ 100%{
+ transform:translate(2vmin,28vmin);
+ }
+
+}
+
+@keyframes flower-fall-down-yellow {
+
+ 0%{
+ transform: rotate(-55deg);
+ }
+
+ 50%{
+ bottom: 3vmin;
+ transform: rotateX(-100deg);
+ }
+
+ 100%{
+ transform:translate(2vmin,70vmin) rotate(150deg);
+ }
+
+}
+
+@keyframes flower-fall-down-purple {
+
+ 0%{
+ transform: rotate(-50deg);
+ }
+
+ 25%{
+ bottom: 1vmin ;
+ transform: rotateX(-100deg);
+ perspective: 0px;
+ }
+
+ 50%{
+ perspective: 0px;
+ transform:translate(-30vmin,2vmin) rotate(90deg);
+ }
+
+ 75%{
+ perspective: 0px;
+ transform:translate(-34vmin,-2vmin);
+ }
+
+ 100%{
+ transform-origin: center;
+ transform:translate(-34vmin,-2vmin) rotateY(-80deg) rotateX(35deg);
+ }
+
+}
+
+@keyframes flower-falling {
+ 0%,100%{
+ transform-origin: center;
+ transform:translate(-34vmin,-2vmin) rotateY(-80deg) rotateX(35deg);
+ }
+
+ 25%{
+ transform-origin: center;
+ transform:translate(-34.4vmin,-2vmin) rotateY(-84deg) rotateX(35deg);
+ }*,
+ *::after,
+ *::before {
+ padding: 0;
+ margin: 0;
+ box-sizing: border-box;
+ }
+
+ :root {
+ --color-bg: linear-gradient(to top, #010329, #000005);
+ --color-glass: linear-gradient(to left, #142544, #1a9092);
+ --color-water: linear-gradient(to left, #142544, #1b6d6e);
+ }
+
+ body {
+ background-image: var(--color-bg);
+ min-height: 100vh;
+ display: flex;
+ justify-content: center;
+ align-items: flex-end;
+ overflow: hidden;
+ }
+
+ .flower {
+ position: relative;
+ }
+
+ .flower__glass {
+ width: 20vmin;
+ height: 30vmin;
+ background-image: var(--color-glass);
+ clip-path: polygon(0 0, 100% 0, 85% 100%, 15% 100%);
+ opacity: .8;
+ position: relative;
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+ border-radius: 10px;
+ }
+
+ .flower__glass::after {
+ content: '';
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ background-color: #182843;
+ width: 100%;
+ height: 2vmin;
+ border-radius: 0 0 10px 10px;
+ }
+
+ .flower__glass::before {
+ content: '';
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ background-image: var(--color-water);
+ width: 100%;
+ height: 15vmin;
+ border-radius: 0 0 10px 10px;
+ }
+
+ .f-wrapper {
+ position: absolute;
+ left: 45%;
+ bottom: 2vmin;
+ animation: float 5s ease-in-out infinite;
+ }
+
+ .f-wrapper--2 {
+ left: 50%;
+ bottom: 5%;
+ transform-origin: 10% left;
+ transform: rotate(20deg);
+ animation: sway 3s ease-in-out infinite;
+ }
+
+ .f-wrapper--3 {
+ left: 30%;
+ bottom: 5%;
+ transform-origin: 10% left;
+ transform: rotate(-10deg);
+ animation: sway 3s ease-in-out infinite reverse;
+ }
+
+ .f-wrapper--3 .flower__line {
+ height: 45vmin;
+ position: relative;
+ }
+
+ .f-wrapper--3 .flower__line::after {
+ content: '';
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 6vmin;
+ height: 6vmin;
+ transform: translate(-69%, -30%) rotate(-5deg);
+ border-radius: 10vmin 10vmin 0 0;
+ border: 2vmin solid #104d4e;
+ border-bottom: transparent;
+ border-left: transparent;
+ }
+
+ .f-wrapper--3 .flower__line::before {
+ content: '';
+ position: absolute;
+ left: -40%;
+ top: -1%;
+ width: 6vmin;
+ height: 2vmin;
+ transform-origin: right;
+ transform: translate(-100%, -80%) rotate(-20deg);
+ background-color: #104d4e;
+ border-radius: 2vmin;
+ }
+
+ .f-wrapper--3 .flower__line {
+ background-image: linear-gradient(to top, #142544, #104d4e);
+ }
+
+ .f-wrapper--2 .flower__line {
+ height: 45vmin;
+ }
+
+ .f-wrapper--2 .f {
+ transform: translateX(-50%) rotate(20deg);
+ }
+
+ .f-wrapper--3 .f {
+ transform: translate(-350%, -50%) rotate(-120deg);
+ }
+
+ .f-wrapper--2 .flower__leaf:not(:first-child) {
+ width: 3.8vmin;
+ height: 10vmin;
+ background-image: linear-gradient(to bottom, #ff43b6, #c22887, #1a233a 99%);
+ }
+
+ .f-wrapper--3 .flower__leaf:not(:first-child) {
+ width: 3.8vmin;
+ height: 10vmin;
+ background-image: linear-gradient(to bottom, #ad2be0, #712291, #1a233a 99%);
+ }
+
+ .f-wrapper--3 .flower__leaf--1 {
+ width: 8vmin;
+ height: 10vmin;
+ bottom: 2vmin;
+ background-color: #ad2be0;
+ }
+
+ .f-wrapper--2 .flower__leaf--1 {
+ width: 8vmin;
+ height: 10vmin;
+ bottom: 2vmin;
+ background-color: #de118b;
+ }
+
+ .f-wrapper--2 .f .flower__leaf--8 {
+ width: 10vmin;
+ height: 9vmin;
+ bottom: 3vmin;
+ left: -30%;
+ transform: rotate(-50deg);
+ background-image: linear-gradient(to left bottom, #ff43b6, #4d1337);
+ }
+
+ .f-wrapper--3 .f .flower__leaf--8 {
+ width: 10vmin;
+ height: 9vmin;
+ left: -10% !important;
+ background-image: linear-gradient(to left bottom, #ad2be0, #712291);
+ }
+
+ .flower__line {
+ width: 2vmin;
+ height: 56vmin;
+ background-image: linear-gradient(to left top, #82fdff 20%, #142544, #104d4e);
+ border-radius: 4vmin;
+ }
+
+ .f {
+ position: absolute;
+ top: 1vmin;
+ left: 50%;
+ transform: translateX(-50%) rotate(-10deg);
+ width: 2vmin;
+ height: 2vmin;
+ }
+
+ .flower__leaf {
+ position: absolute;
+ left: 50%;
+ bottom: 2vmin;
+ transform: translateX(-50%);
+ width: 5vmin;
+ height: 14vmin;
+ background-image: linear-gradient(to bottom, #ffa085, #fa7373, #1a233a 99%);
+ clip-path: ellipse(50% 50% at 50% 50%);
+ transform-origin: center bottom;
+ animation: open-flower 2s 1s backwards;
+ }
+
+ .flower__leaf--1 {
+ width: 10vmin;
+ height: 12vmin;
+ bottom: 3vmin;
+ border-radius: 50% 50% 50% 50% / 80% 80% 20% 20%;
+ background-color: #e24f5f;
+ background-image: none;
+ animation: open-flower-middle 1.4s 1s backwards;
+ }
+
+ .flower__leaf--2 {
+ transform: translateX(-50%) rotate(-30deg);
+ }
+
+ .flower__leaf--3 {
+ transform: translateX(-50%) rotate(-50deg);
+ }
+
+ .flower__leaf--4 {
+ transform: translateX(-50%) rotate(-70deg);
+ }
+
+ .flower__leaf--5 {
+ transform: translateX(-50%) rotate(30deg);
+ }
+
+ .flower__leaf--6 {
+ transform: translateX(-50%) rotate(50deg);
+ }
+
+ .flower__leaf--7 {
+ transform: translateX(-50%) rotate(70deg);
+ }
+
+ .flower__leaf--8 {
+ width: 13vmin;
+ height: 11vmin;
+ bottom: 6vmin;
+ left: -30%;
+ border-radius: none;
+ clip-path: none;
+ border-radius: 10vmin 2vmin 10vmin 2vmin;
+ transform: rotate(-55deg);
+ background-image: linear-gradient(to left bottom, #ffa085, #eb8b8b, #492f2f 98%);
+ }
+
+ .flower__fall-down--yellow {
+ animation: flower-fall-down-yellow 8s 1.2s linear forwards, wind 8s 1.2s linear forwards;
+ }
+
+ .flower__fall-down--pink {
+ animation: flower-fall-down-pink 5s 1.2s linear forwards, wind 5s 1.2s linear forwards;
+ }
+
+ .flower__fall-down--purple {
+ bottom: 4vmin;
+ animation: flower-fall-down-purple 6s 1.2s linear forwards, wind 6s 1.2s linear forwards, flower-falling 6s 7.2s linear infinite;
+ }
+
+ @keyframes open-flower {
+ 0% {
+ transform: translateX(-50%) rotate(0);
+ }
+ }
+
+ @keyframes open-flower-middle {
+ 0% {
+ opacity: 0;
+ transform: translateX(-50%) scale(0);
+ }
+ }
+
+ @keyframes flower-fall-down-pink {
+ 0% {
+ transform: rotate(-55deg);
+ }
+ 50% {
+ transform: rotateX(-100deg);
+ }
+ 100% {
+ transform: translate(2vmin, 28vmin);
+ }
+ }
+
+ @keyframes flower-fall-down-yellow {
+ 0% {
+ transform: rotate(-55deg);
+ }
+ 50% {
+ bottom: 3vmin;
+ transform: rotateX(-100deg);
+ }
+ 100% {
+ transform: translate(2vmin, 70vmin) rotate(150deg);
+ }
+ }
+
+ @keyframes flower-fall-down-purple {
+ 0% {
+ transform: rotate(-50deg);
+ }
+ 25% {
+ bottom: 1vmin;
+ transform: rotateX(-100deg);
+ perspective: 0px;
+ }
+ 50% {
+ perspective: 0px;
+ transform: translate(-30vmin, 2vmin) rotate(90deg);
+ }
+ 75% {
+ perspective: 0px;
+ transform: translate(-34vmin, -2vmin);
+ }
+ 100% {
+ transform-origin: center;
+ transform: translate(-34vmin, -2vmin) rotateY(-80deg) rotateX(35deg);
+ }
+ }
+
+ @keyframes flower-falling {
+ 0%, 100% {
+ transform-origin: center;
+ transform: translate(-34vmin, -2vmin) rotateY(-80deg) rotateX(35deg);
+ }
+ 25% {
+ transform-origin: center;
+ transform: translate(-34.4vmin, -2vmin) rotateY(-84deg) rotateX(35deg);
+ }
+ 50% {
+ transform-origin: center;
+ transform: translate(-32vmin, -4.2vmin) rotateY(-80deg) rotateX(35deg);
+ }
+ 75% {
+ transform-origin: center;
+ transform: translate(-36vmin, 1.1vmin) rotateY(-80deg) rotateX(35deg);
+ }
+ }
+
+ @keyframes float {
+ 0%, 100% {
+ transform: translateY(0);
+ }
+ 50% {
+ transform: translateY(-20px);
+ }
+ }
+
+ @keyframes sway {
+ 0%, 100% {
+ transform: rotate(20deg);
+ }
+ 50% {
+ transform: rotate(25deg);
+ }
+ }
+
+ @keyframes wind {
+ 0% {
+ transform: translateX(0);
+ }
+ 50% {
+ transform: translateX(10px);
+ }
+ 100% {
+ transform: translateX(0);
+ }
+ }
+
+ 50%{
+ transform-origin: center;
+ transform:translate(-32vmin,-4.2vmin) rotateY(-80deg) rotateX(35deg);
+ }
+
+ 75%{
+ transform-origin: center;
+ transform:translate(-36vmin,1.1vmin) rotateY(-80deg) rotateX(35deg);
+ }
+}
diff --git a/Flowers/index.html b/Flowers/index.html
new file mode 100644
index 00000000..d3a61ef8
--- /dev/null
+++ b/Flowers/index.html
@@ -0,0 +1,55 @@
+
+
+
+
+
+ Flower Animation
+
+
+
+
+
+
\ No newline at end of file