✨Effect Lab
Read the full guide完整技术长文 A particle is four numbers and a deadline粒子就是四个数,加一个截止时间
💖

Falling Hearts 飘落爱心

One new emoji every 300ms, each riding its own rise-and-rotate loop until it leaves the viewport. 每 300ms 生成一颗 emoji 爱心,各自跑一条上升加旋转的循环,飘出屏幕就销毁。

DOMsetIntervalCSS Transform
Live demo实时演示

Runs live on this page. Move the pointer, click, or drag — whichever the effect listens for. 就在本页实时运行。移动鼠标、点击或拖拽——看它响应哪一种。

How it works原理拆解

setInterval spawns a div at a random horizontal position, font-size randomised between 14 and 34px. The inner loop translates it upward by 1.5px per frame while adding 3 degrees of rotation, and removes it once it clears innerHeight plus a 40px margin. setInterval 在随机横向位置插一个 div,字号在 14–34px 之间随机。内层循环每帧向上平移 1.5px、同时转 3 度,超出 innerHeight 加 40px 余量后 remove。

What to change可以改的地方

  • 1Raise the interval to 120ms and it becomes a dense wall of hearts.
  • 2Give each heart a random horizontal drift for a more organic float.
  • 1间隔改成 120ms,就变成一堵密集的爱心墙。
  • 2给每颗爱心加一点横向漂移,飘起来更自然。

Source code源码

Self-contained — paste it into any HTML file and it runs. No libraries. 完全独立——粘进任意 HTML 文件就能跑,不需要任何库。

hearts.html