Rain on a web page

on
HTML CODE:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link  rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div class="rain"></div>
</body>
</html>
CSS CODE: (file Name :style.css )
body
{
margin: 0px;
padding: 0px;
background-image: url('00797_deadcalm_2560x1600.jpg');
background-size: cover;
background-repeat: no-repeat;
width: 100%;
height: 100vh;
}
.rain
{
height: 100vh;
background-image: url('rain.png');
animation: animate 4s linear infinite;
}

.rain::before
{
content:'';
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(to right, transparent, #fff,transparent,transparent,transparent,#fff,transparent);
animation: light 3s linear infinite;
opacity: 0;
}

@keyframes animate
{
0%
{
background-position:0% 0%;
}
100%
{
background-position:-20% 100%;
}
}
@keyframes light
{
0%
{
opacity: 0;
}
15%
{
opacity: 0;
}
25%
{
opacity: 0;
}
35%
{
opacity: 1;
}
50%
{
opacity: 0;
}
60%
{
opacity: 0;
}
75%
{
opacity: 0;
}
85%
{
opacity: 0;
}
100%
{
opacity: 0;
}
}
Images:



Comments

  1. SYED SAQIBFebruary 17, 2020 at 3:38 AM

    Appreciated very helpful.

    ReplyDelete
  2. Elon MuskNovember 2, 2020 at 2:44 AM

    Most of the time I don’t make comments on websites, but I'd like to say that this article really forced me to do so. Really nice post! simply buzzes

    ReplyDelete
  3. pinkyDecember 2, 2020 at 2:08 PM

    I exactly got what you mean, thanks for posting. And, I am too much happy to find this website on the world of Google. dotcomsecrets

    ReplyDelete
  4. sid seoJanuary 5, 2021 at 9:44 PM

    I really loved reading your blog. It was very well authored and easy to understand. Unlike other blogs I have read which are really not that good.Thanks alot! 웹툰 다시보기

    ReplyDelete
  5. haaliOctober 6, 2021 at 7:04 AM

    This is astoundingly astonishing substance! I have all around respected examining your obsessions and have shown at the target that you are sensible concerning a monster piece of them. You are beast. dark web links

    ReplyDelete

Post a Comment