Skip to content

Statusdone

Rain streaks

A layer of rain made with nothing but CSS — and no canvas.

  • 动效
  • 独立开发

Run 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>

Lab notes

The point is to keep the rain from becoming the subject: opacity under 0.5, durations between 1.4 and 3.4 seconds.

Contact

Tell me what you are working on and what you need.

Usually replies within 1–2 business days