Rain Animation code:
1.index.html:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Rain Animation</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="rain"></div> </body> </html>
2.style.css: body { margin: 0; padding: 0; background: url(city.png); background-size: cover; background-repeat: no-repeat; } .rain { height: 100vh; background: url(rain.png); animation: rain 4s linear infinite; } .rain::before { content: ''; position: absolute; width: 100%; height: 100%; background: white; animation: lighting 0.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; } 14% { opacity: 1; } 19% { opacity: 0; } 23% { opacity: 0; } 27% { opacity: 0; } 105% { opacity: 0; } }
