body {
  margin: 0;
  padding: 0;
  background-image: url(forest-5006734_1280.jpg);
  background-size: cover;
}
.rain {
  height: 100vh;
  background-image: url(rain.png);
  animation: rain 0.3s linear infinite;
}
@keyframes rain {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 20% 100%;
  }
}
.rain::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url(lightining.png);
  top: -100px;
  transform: rotate(180deg);
  animation: lightining 4s linear infinite;
  opacity: 1;
}
@keyframes lightining {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 0;
  }
  21% {
    opacity: 1;
  }
  25% {
    opacity: 0;
  }
  30% {
    opacity: 0;
  }
  31% {
    opacity: 1;
  }
  35% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}