div {

    position: absolute;

    width: 3px;

    height: 6px;

    top: 30%;

    left: 50%;

    // background: #cccccc;

    border-radius: 50%;

    animation: rainy_rain 0.7s infinite linear;

}

div:before {

    content: "";

    color: #333;

    position: absolute;

    height: 50px;

    width: 50px;

    top: 30px;

    left: -40px;

    background: #ccc;

    transform: translate(-50%, -50%);

    border-radius: 50%;

    box-shadow: #ccc 65px -15px 0 -5px, #ccc 25px -25px, #ccc 30px 10px,

        #ccc 60px 15px 0 -10px, #ccc 85px 5px 0 -5px;

    animation: cloudy 5s ease-in-out infinite;

}

div:after {

    content: "";

    position: absolute;

    top: 120px;

    left: 50%;

    height: 15px;

    width: 120px;

    background: rgba(0, 0, 0, 0.5);

    border-radius: 50%;

    transform: translate(-50%, -50%);

    animation: cloudy_shadow 5s ease-in-out infinite;

}

@keyframes cloudy {

    50% {

        transform: translate(-50%, -70%);

    }

    100% {

        transform: translate(-50%, -50%);

    }

}

@keyframes cloudy_shadow {

    50% {

        transform: translate(-50%, -50%) scale(0.8);

        background: rgba(0, 0, 0, 0.2);

    }

    100% {

        transform: translate(-50%, -50%) scale(1);

        background: rgba(0, 0, 0, 0.5);

    }

}

@keyframes rainy_rain {

    0% {

        box-shadow: rgba(0, 0, 0, 0) -10px 30px, rgba(0, 0, 0, 0) 40px 40px,

            rgba(0, 0, 0, 0.3) -50px 75px, rgba(0, 0, 0, 0.3) 55px 50px,

            rgba(0, 0, 0, 0.3) -18px 100px, rgba(0, 0, 0, 0.3) 12px 95px,

            rgba(0, 0, 0, 0.3) -31px 45px, rgba(0, 0, 0, 0.3) 30px 35px;

    }

    25% {

        box-shadow: rgba(0, 0, 0, 0.3) -10px 45px, rgba(0, 0, 0, 0.3) 40px 60px,

            rgba(0, 0, 0, 0.3) -50px 90px, rgba(0, 0, 0, 0.3) 55px 65px,

            rgba(0, 0, 0, 0) -18px 120px, rgba(0, 0, 0, 0) 12px 120px,

            rgba(0, 0, 0, 0.3) -31px 70px, rgba(0, 0, 0, 0.3) 30px 60px;

    }

    26% {

        box-shadow: rgba(0, 0, 0, 0.3) -10px 45px, rgba(0, 0, 0, 0.3) 40px 60px,

            rgba(0, 0, 0, 0.3) -50px 90px, rgba(0, 0, 0, 0.3) 55px 65px,

            rgba(0, 0, 0, 0) -18px 40px, rgba(0, 0, 0, 0) 12px 20px,

            rgba(0, 0, 0, 0.3) -31px 70px, rgba(0, 0, 0, 0.3) 30px 60px;

    }

    50% {

        box-shadow: rgba(0, 0, 0, 0.3) -10px 70px, rgba(0, 0, 0, 0.3) 40px 80px,

            rgba(0, 0, 0, 0) -50px 100px, rgba(0, 0, 0, 0.3) 55px 80px,

            rgba(0, 0, 0, 0.3) -18px 60px, rgba(0, 0, 0, 0.3) 12px 45px,

            rgba(0, 0, 0, 0.3) -31px 95px, rgba(0, 0, 0, 0.3) 30px 85px;

    }

    51% {

        box-shadow: rgba(0, 0, 0, 0.3) -10px 70px, rgba(0, 0, 0, 0.3) 40px 80px,

            rgba(0, 0, 0, 0) -50px 45px, rgba(0, 0, 0, 0.3) 55px 80px,

            rgba(0, 0, 0, 0.3) -18px 60px, rgba(0, 0, 0, 0.3) 12px 45px,

            rgba(0, 0, 0, 0.3) -31px 95px, rgba(0, 0, 0, 0.3) 30px 85px;

    }

    75% {

        box-shadow: rgba(0, 0, 0, 0.3) -10px 95px, rgba(0, 0, 0, 0.3) 40px 100px,

            rgba(0, 0, 0, 0.3) -50px 60px, rgba(0, 0, 0, 0) 55px 95px,

            rgba(0, 0, 0, 0.3) -18px 80px, rgba(0, 0, 0, 0.3) 12px 70px,

            rgba(0, 0, 0, 0) -31px 120px, rgba(0, 0, 0, 0) 30px 110px;

    }

    76% {

        box-shadow: rgba(0, 0, 0, 0.3) -10px 95px, rgba(0, 0, 0, 0.3) 40px 100px,

            rgba(0, 0, 0, 0.3) -50px 60px, rgba(0, 0, 0, 0) 55px 35px,

            rgba(0, 0, 0, 0.3) -18px 80px, rgba(0, 0, 0, 0.3) 12px 70px,

            rgba(0, 0, 0, 0) -31px 25px, rgba(0, 0, 0, 0) 30px 15px;

    }

    100% {

        box-shadow: rgba(0, 0, 0, 0) -10px 120px, rgba(0, 0, 0, 0) 40px 120px,

            rgba(0, 0, 0, 0.3) -50px 75px, rgba(0, 0, 0, 0.3) 55px 50px,

            rgba(0, 0, 0, 0.3) -18px 100px, rgba(0, 0, 0, 0.3) 12px 95px,

            rgba(0, 0, 0, 0.3) -31px 45px, rgba(0, 0, 0, 0.3) 30px 35px;

    }

}

​