body,html{
    height: 100%;
}

#content{
    position: relative;
    height: 100%;
    background-color: #ffffff;
    overflow: hidden;
}

.raindrop{
    position: absolute;
    width: 6px;
    height: 8px;
    background-color: #99a9bf;
    clip-path: ellipse(10% 30% at 50% 50%);
    transform: scale(8);
    opacity: 0;
    animation:move 1.2s cubic-bezier(0.54,0,0.18,0.34) infinite;
}

@keyframes move {
    0%{
        opacity: 0;
    }
    40%{
        opacity: 1;
    }
    90%{
        opacity: 1;
    }
    100%{
        opacity: 0;
        //实现3d的效果
        transform:translate3d(10px,100vh,-10px);
    }
}


<!--JS
let content = document.getElementById("content");
 let num = 0;
 //雨滴的分布
 for (let i = 0; i < 30; i ++){
     let lefts = Math.floor(Math.random()*5 + 2);
     let delay = Math.floor(Math.random()*5 + 2);
     num += lefts;
     let div = document.createElement("div");
     div.setAttribute("class", "raindrop");
     let sty = document.getElementsByClassName("raindrop");
     sty[i].style.left = `${num}%`;
     sty[i].style.top = `${lefts}%`;
     //延迟时间
     sty[i].style.animationDelay= `${delay/10}s`;
     content.appendChild(div);
 }
-->