Create Flower using Html and CSS / Flower Animation in pure CSS,create flower css,html,css animation,css flower,flower animation css,css animation tutorial,create flower using html and css,css flower animation,how to create flower in html,create flower wall,flow create html table,flow create html table from array,flower html code,how to draw a flower in javascript,flower in html,how to create flowers with tissue paper,how to create a 3d flower,create flowchart using html and css,flow create html table format

Please subscribe our channel and support me.
Please like and 1 comment this video.


If you are visiting my channel for the first time then please subscribe
Go to my Youtube channel : class="simple-endpoint" dir="auto" href="https://www.youtube.com/channel/UCP43UNTq7UZD1cu_qTbmC9A"
spellcheck="false">https://www.youtube.com




@ Recommendations Videos


blogger theme design : spellcheck="false">https://youtu.be/DAIJTjRzxLk


Login Form : spellcheck="false">https://youtu.be/HWbAr1XN3Lc


Forms design : spellcheck="false">https://youtu.be/M2ERkDXjEuw


Responsive CSS card : spellcheck="false">https://youtu.be/Ol9_5cYtAaw


Navigation design : spellcheck="false">https://youtu.be/LNEgZBdWPGM



Disclaimer video is for educational purpose only. Copyright Disclaimer Under Section 107 of the Copyright Act 1976,
allowance is made for "fair use" for purposes such as criticism, comment, news reporting, teaching, scholarship, and
research. Fair use is a use permitted by copyright statute that might otherwise be infringing. Non-profit, educational
or personal use tips the balance in favor of fair use .


Thanks..





Html Code



<div class="flowers">
<div class="f-wrapper">
<div class="flower-line"></div>
<div class="flower">
<div class="flower-leaf"></div>
<div class="flower-leaf"></div>
<div class="flower-leaf"></div>
<div class="flower-leaf"></div>
<div class="flower-leaf"></div>
<div class="flower-leaf"></div>
<div class="flower-leaf"></div>
<div class="flower-leaf flower-yellow"></div>
</div>
</div>
<div class="f-wrapper flower-2">
<div class="flower-line"></div>
<div class="flower">
<div class="flower-leaf"></div>
<div class="flower-leaf"></div>
<div class="flower-leaf"></div>
<div class="flower-leaf"></div>
<div class="flower-leaf"></div>
<div class="flower-leaf"></div>
<div class="flower-leaf"></div>
<div class="flower-leaf flower-pink"></div>
</div>
</div>
<div class="f-wrapper flower-3">
<div class="flower-line"></div>
<div class="flower">
<div class="flower-leaf"></div>
<div class="flower-leaf"></div>
<div class="flower-leaf"></div>
<div class="flower-leaf"></div>
<div class="flower-leaf"></div>
<div class="flower-leaf"></div>
<div class="flower-leaf"></div>
<div class="flower-leaf flower-purple"></div>
</div>
</div>
<div class="flower-glass"></div>
</div>





Css Code



*,
*::after,
*::before {
padding: 0;
margin: 0;
box-sizing: border-box;
}

:root {
--color-background: linear-gradient(to top, #013f5c, #000005);
--color-glass: linear-gradient(to left, #142544, #1a9092);
--color-water: linear-gradient(to left, #142544, #1b6d6e);
}

body {
background: var(--color-background);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: flex-end;
overflow: hidden;
}

.flowers {
position: relative;
}

.flower-glass {
width: 20vmin;
height: 30vmin;
background: 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: #182843;
width: 100%;
height: 2vmin;
}

.flower-glass::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
background: var(--color-water);
width: 100%;
height: 15vmin;
}

.f-wrapper {
position: absolute;
left: 45%;
bottom: 2vmin;
}

.flower-line {
width: 2vmin;
height: 56vmin;
background: linear-gradient(to left top, #82fdff 20%, #142544, #104d4e);
border-radius: 4vmin;
}

.flower {
position: absolute;
top: 1vmin;
left: 50%;
transform: translateX(-50%) rotate(-10deg);
width: 2vmin;
height: 2vmin;
}

.flower-2 {
left: 50%;
bottom: 5%;
transform-origin: 10% left;
transform: rotate(20deg);
}

.flower-3 {
left: 30%;
bottom: 5%;
transform-origin: 10% left;
transform: rotate(-10deg);
}

.flower-3 .flower-line {
height: 45vmin;
position: relative;
}

.flower-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;
}

.flower-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: #104d4e;
border-radius: 2vmin;
}

.flower-3 .flower-line {
background: linear-gradient(to top, #142544, #104d4e);
}

.flower-2 .flower-line {
height: 45vmin;
}

.flower-2 .flower {
transform: translateX(-50%) rotate(20deg);
}

.flower-3 .flower {
transform: translate(-350%, -50%) rotate(-120deg);
}

.flower-2 .flower-leaf:not(:first-child) {
width: 3.8vmin;
height: 10vmin;
background: linear-gradient(to bottom, #ff43b6, #c22887, #1a233a 99%);
}

.flower-3 .flower-leaf:not(:first-child) {
width: 3.8vmin;
height: 10vmin;
background: linear-gradient(to bottom, #ad2be0, #712291, #1a233a 99%);
}

.flower-3 .flower-leaf:nth-child(1) {
width: 8vmin;
height: 10vmin;
bottom: 2vmin;
background: #ad2be0;
}

.flower-2 .flower-leaf:nth-child(1) {
width: 8vmin;
height: 10vmin;
bottom: 2vmin;
background: #de118b;
}

.flower-2 .flower .flower-leaf:nth-child(8) {
width: 10vmin;
height: 9vmin;
bottom: 3vmin;
left: -30%;
transform: rotate(-50deg);
background: linear-gradient(to left bottom, #ff43b6, #4d1337);
;
}

.flower-3 .flower .flower-leaf:nth-child(8) {
width: 10vmin;
height: 9vmin;
left: -10% !important;
background: linear-gradient(to left bottom, #ad2be0, #712291);
}

.flower-leaf {
position: absolute;
left: 50%;
bottom: 2vmin;
transform: translateX(-50%);
width: 5vmin;
height: 14vmin;
background: 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:nth-child(1) {
width: 10vmin;
height: 12vmin;
bottom: 3vmin;
border-radius: 50% 50% 50% 50% / 80% 80% 20% 20%;
background: #e24f5f;
animation: open-flowe-middle 1.4s 1s backwards;
}

.flower-leaf:nth-child(2) {
transform: translateX(-50%) rotate(-30deg);
}

.flower-leaf:nth-child(3) {
transform: translateX(-50%) rotate(-50deg);
}

.flower-leaf:nth-child(4) {
transform: translateX(-50%) rotate(-70deg);
}

.flower-leaf:nth-child(5) {
transform: translateX(-50%) rotate(30deg);
}

.flower-leaf:nth-child(6) {
transform: translateX(-50%) rotate(50deg);
}

.flower-leaf:nth-child(7) {
transform: translateX(-50%) rotate(70deg);
}

.flower-leaf:nth-child(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: linear-gradient(to left bottom, #ffa085, #eb8b8b, #492f2f 98%);
}

.flower-yellow {
animation: flower-fall-down-yellow 8s 1.2s linear forwards;
}

.flower-pink {
animation: flower-fall-down-pink 5s 1.2s linear forwards;
}

.flower-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-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 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);
}
}