Rain Animation by HTML & CSS
Today we are going to see ,How to make a Rain animation in Webpage . We use only HTML & CSS to make this webdesign. Hope it will be helpful for you .
HTML CODE:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Rain Animation</title>
<link href="rain.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="rain"></div>
</body>
</html>
CSS CODE:
@charset "utf-8";
/* CSS Document */
body
{
margin:0;
padding: 0;
background: url(727283.jpg);
background-size: cover;
background-repeat: no-repeat;
}
.rain
{
height: 100vh;
background: url(rain.png);
animation: rain .2s linear infinite;
}
.rain:before
{
content: '';
position: absolute;
width: 100%;
height: 100%;
background: #FFFFFF;
animation: lighting .3s linear infinite;
opacity: 0;
}
@keyframes rain
{
0%
{
background-position: 0% 0%;
}
100%
{
background-position: 20% 100%;
}
}
@keyframes lighting
{
0%
{
opacity: 0;
}
10%
{
opacity: 0;
}
11%
{
opacity: 1;
}
14%
{
opacity: 0;
}
20%
{
opacity: 0;
}
21%
{
opacity: 1;
}
24%
{
opacity: 0;
}
104%
{
opacity: 0;
}
}
Try Yourself . Hope It's give you satisfaction .
![](https://steemitimages.com/DQmTRXqm2xhZw6ZU5RUqv44u1qAf8fwozug4niRhj2nkBEy/ice_screenshot_20171028-093956.png)
img credz: pixabay.com
Nice, you got a 28.0% @steemdrive upgoat, thanks to @minhazuddinnahid
Want a boost? Minnowbooster's got your back!
The @OriginalWorks bot has determined this post by @minhazuddinnahid to be original material and upvoted(1.5%) it!
To call @OriginalWorks, simply reply to any post with @originalworks or !originalworks in your message!
thanks a lot
nice content
Thanks You
nice
great post
Thanks You
nice post. now i will be a web designer :-)
great
wow!!!
Thanks You
nice post
Nice work
i'll try it