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...
1 comment:
Code is awesome ,and the petals animation work. I just want to ask one question that why is the their a side bar glitch on the screen while playing the animation can you Please!! solve that
Post a Comment