运行 Demo
<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;background:#0E1018;overflow:hidden}i{position:absolute;top:-20%;width:1px;height:60px;background:linear-gradient(transparent,rgba(224,139,114,.55));animation:f linear infinite}@keyframes f{to{transform:translate3d(6px,140vh,0)}}</style></head><body><script>for(var n=0;n<90;n++){var e=document.createElement("i");e.style.left=Math.random()*100+"%";e.style.animationDuration=(1.4+Math.random()*2)+"s";e.style.animationDelay=(-Math.random()*3)+"s";e.style.opacity=(.2+Math.random()*.5).toFixed(2);document.body.appendChild(e)}</script></body></html>实验笔记
关键是别让雨成为主角:透明度压在 0.5 以下,速度放在 1.4–3.4 秒之间。
联系我
说说你在做什么,以及需要什么帮助。
通常 1–2 个工作日内回复