Magic Due To Logic: Rain Animation with Lighting Effect

Sunday 6 December 2020

Rain Animation with Lighting Effect

index.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css" type="text/css">
    <title>Rain Animation with Lighting Effect</title>
  </head>
  <body>
    <div class="rain">
      
    </div>
  </body>
</html>

style.css

body{
  margin: 0;
  padding: 0;
  background: url(background.jpg);
  background-size: cover;
  background-repeat: no-repeat;
}
.rain{
  height: 100vh;
  background: url(rain.png);
  animation: rain .5s linear infinite;
}
.rain::before{
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: #fff;
  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;
  }
}

Download - Code

Download - Full Code

Magic Due To Logic

Pages

Sunday 6 December 2020

Rain Animation with Lighting Effect

Rain Animation with Lighting Effect

index.html

style.css

No comments:

Donate