Rain Animation

Home / Web Code Snippet / Rain Animation

Rain Animation

                                                     https://youtube.com/shorts/eZd69tIlsjk?si=eHaMmsgub8_PdCgN

HTML CODE:-
<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    </head>
    <body>
        <div class="container">
            <div class="meta">
                <h2>25 CLOUDY</h2>
                <div class="box">
                    <h2><i class="fa-solid fa-cloud-sun-rain"></i> 29 Feb</h2>
                </div>
            </div>
        </div>
    </body>
</html>
CSS CODE:-
             body {
                margin: 0;
                padding: 0;
            }
            .container{
                position: relative;
                width: 100%;
                height: 100vh;
                background-image: url("https://media.istockphoto.com/id/467621442/photo/storm-clouds-over-mountains-of-  ladakh-jammu-and-kashmir-india.jpg?s=612x612&w=0&k=20&c=_xPHjA31itk6S8OVHzTljVEXM7zGdmpEq6cjI_0n7ME=");
                background-size: cover;
                background-position: center;
            }
            .container:before {
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-image: url(
                https://media.geeksforgeeks.org/wp-content/uploads/20200828184719/rain-300x300.png);
                animation: animate 0.4s linear infinite;
                opacity: 0;
            }
            @keyframes animate{
                0% {
                    background-position: 0 0;
                    opacity: 1;
                }
 
                100% {
                    background-position: 8% 80%;
                    opacity: 1;
                }
            }
            .meta{
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
                height: 80px;
                width: 300px;
                border-radius: 20px;
                background-color: rgba(30, 39, 39, 0.5);
                padding: 0px 10px;
                color: white;
                display: flex;
                justify-content: space-evenly;
            }