1/* This is a pure css Rain effect just put a <section></section> in your html file */
2
3section {
4 width: 100%;
5 height: 100vh;
6 position: relative;
7 position: absolute;
8 top: 0;
9 left: 0;
10 background-image: url(https://media.geeksforgeeks.org/wp-content/uploads/20200828184719/rain-300x300.png);
11 animation: rain 0.4s linear infinite;
12 opacity: 0;
13}
14
15@keyframes rain {
16 0% {
17 background-position: 0 0;
18 opacity: 1;
19 }
20
21 100% {
22 background-position: 10% 100%;
23 opacity: 1;
24 }
25}