效果图：
代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin:0;padding:0;}body{background: #000;overflow:hidden;}div{position: absolute;width:5px;height:200px;border-radius: 0 0 5px 5px;animation:dropRain 5s linear infinite;}@keyframes dropRain {0%{transform:translateY(-200px);}100%{transform:translateY(100vh);}}div:nth-child(3n+1){background:linear-gradient(transparent,#14b3ff)}div:nth-child(3n+2){background:linear-gradient(transparent,#00a6f5)}div:nth-child(3n+3){background:linear-gradient(transparent,#00a6f59c)}</style>
</head>
<body></body>
</html>
<script>
let n=200;
const body =document.querySelector('body');
for(let i=0;i<n;i++){const drop=document.createElement('div');drop.style.left=Math.random()*body.offsetWidth+'px';drop.style.animationDelay=Math.random()*-5+'s';//延迟设为负值，可以让元素提前执行，而不是延迟执行drop.style.animationDuration=Math.random()*5+1+'s';body.appendChild(drop);
}
</script>
