Magic Due To Logic: August 2020

Flower Rain Animation in HTML CSS -

Download: Code

Index.html

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>Flower Animaion</title>
  </head>
  <body>
    <div class="canvas">

     <div class="flower" id="flower1">
        <div class="petal petal1 f1p"></div>
        <div class="petal petal2 f1p"></div>
        <div class="petal petal3 f1p"></div>
        <div class="petal petal4 f1p"></div>
        <div class="petal petal5 f1p"></div>
     </div>

     <div class="flower" id="flower2">
        <div class="petal petal1 f2p"></div>
        <div class="petal petal2 f2p"></div>
        <div class="petal petal3 f2p"></div>
        <div class="petal petal4 f2p"></div>
        <div class="petal petal5 f2p"></div>
     </div>
     
     <div class="flower" id="flower3">
        <div class="petal petal1 f3p"></div>
        <div class="petal petal2 f3p"></div>
        <div class="petal petal3 f3p"></div>
        <div class="petal petal4 f3p"></div>
        <div class="petal petal5 f3p"></div>
     </div>

     <div class="flower" id="flower4">
        <div class="petal petal1 f4p"></div>
        <div class="petal petal2 f4p"></div>
        <div class="petal petal3 f4p"></div>
        <div class="petal petal4 f4p"></div>
        <div class="petal petal5 f4p"></div>
     </div>

     <div class="flower" id="flower5">
        <div class="petal petal1 f5p"></div>
        <div class="petal petal2 f5p"></div>
        <div class="petal petal3 f5p"></div>
        <div class="petal petal4 f5p"></div>
        <div class="petal petal5 f5p"></div>
     </div>

     <div class="flower" id="flower6">
        <div class="petal petal1 f6p"></div>
        <div class="petal petal2 f6p"></div>
        <div class="petal petal3 f6p"></div>
        <div class="petal petal4 f6p"></div>
        <div class="petal petal5 f6p"></div>
     </div>
  </div>
  </body>
</html>

style.css

body {
    margin:0;
    padding:0;
    background-color:#702050;
}
.canvas{
    display:inline;
}
.flower{
    width:15px;
    height:15px;
    border-radius:50%;
    z-index:1;
    position:absolute;
    top:-20%;
}
.petal{
    width:15px;
    height:15px;
    border-radius:50%;
    z-index:-1;
}
.petal1{
    position:relative;
    left:-70%; top:20%;
}
.petal2{
    position:relative;
    top:-18%; left:-5%;
}
.petal3{
    position:relative;
    top:-170%; left:72%;
}
.petal4{
    position:relative;
    top:-363%; left:-30%;
}
.petal5{
    position:relative;
    top:-450%; left:53%;
}

#flower1{
    background-color:yellow;
    position:absolute;
    left:8%;
    animation-name:rain;
    animation-duration:7s;
    animation-iteration-count:infinite;
    animation-timing-function:linear;
}
.f1p{
    background-color:pink;
}

#flower2{
    background-color:orange;
    position:absolute;
    left:25%;
    animation-name:rain;
    animation-duration:4s;
    animation-iteration-count:infinite;
    animation-timing-function:linear;
    animation-delay:1.5s;
}
.f2p{
    background-color:yellow;
}
#flower3{
    background-color:red;
    position:absolute;
    left:42%;
    animation-name:rain;
    animation-duration:10s;
    animation-iteration-count:infinite;
    animation-timing-function:linear;
    animation-delay:0s;
}
.f3p{
    background-color:skyblue;
}
#flower4{
    background-color:cyan;
    position:absolute;
    left:59%;
    animation-name:rain;
    animation-duration:2.5s;
    animation-iteration-count:infinite;
    animation-timing-function:linear;
    animation-delay:2.5s;
}
.f4p{
    background-color:blue;
}

#flower5{
    background-color:green;
    position:absolute;
    left:75%;
    animation-name:rain;
    animation-duration:10s;
    animation-iteration-count:infinite;
    animation-timing-function:ease-out;
    animation-delay:3s;
}
.f5p{
    background-color:lightgreen;
}

#flower6{
    background-color:magenta;
    position:absolute;
    left:90%;
    animation-name:rain;
    animation-duration:2s;
    animation-iteration-count:infinite;
    animation-timing-function:ease-in;
    animation-delay:4.5s;
}
.f6p{
    background-color:turquoise;
}
@keyframes rain{
    0%{transform:rotate(0deg);
       top:-10%;
    }
    100%{transform:rotate(720deg);
         top:100vh;
    }
}

Output -

Source Code - Click Here...

Magic Due To Logic

Pages

Monday 31 August 2020

Flower Rain Animation in HTML CSS

Donate