跳到主要内容

状态done

雨丝实验

不借助 canvas,只用 CSS 做出一层不吵的雨。

  • 动效
  • 独立开发

运行 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 个工作日内回复