Falling Hearts 飘落爱心
One new emoji every 300ms, each riding its own rise-and-rotate loop until it leaves the viewport. 每 300ms 生成一颗 emoji 爱心,各自跑一条上升加旋转的循环,飘出屏幕就销毁。
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 文件就能跑,不需要任何库。