HTML COODING
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="rain.css">
</head>
<body>
<div class="rain"></div>
</body>
</html>
CSS COODING
body{
margin: 0;
padding: 0;
background: linear-gradient(90deg,red,orange,greenyellow,darkblue);
background-size: cover;
background-repeat: no-repeat;
}
.rain
{
height: 100vh;
width: 100%;
background: url(rain.png);
background-repeat: no-repeat;
animation: rain .7s linear infinite;
}
.rain:before{
content: '';
position: absolute;
height: 100%;
width: 100%;
background: red;
animation: rain 2s linear infinite;
opacity: 0;
}
@keyframes rain{
0%{
background-position: 30% 100%;
}
}
