Confetti Burst 五彩纸屑
No canvas at all — eighty absolutely positioned divs, each given its own gravity and spin. 完全没有 Canvas——八十个绝对定位的 div,每个都有自己的重力和自转。
Runs live on this page. Move the pointer, click, or drag — whichever the effect listens for. 就在本页实时运行。移动鼠标、点击或拖拽——看它响应哪一种。
How it works原理拆解
Every piece gets a random x across 100vw, a random hue, and a starting vy between 2 and 3. The animation loop only touches two CSS properties: translateY and rotate. When a piece falls past innerHeight it removes itself from the DOM, so the page does not accumulate garbage. 每片纸屑随机横向位置、随机色相,起始 vy 在 2 到 3 之间。动画循环只改两个 CSS 属性:translateY 和 rotate。落过 innerHeight 就 remove() 掉,页面不会越堆越多。
What to change可以改的地方
- 1Vary the width and height per piece for a more convincing paper flutter.
- 2Add a sine wave on x to make pieces drift sideways instead of falling straight.
- 1给每片随机宽高,纸片飘落的感觉会更真。
- 2给 x 叠加一条正弦波,纸屑就会左右飘而不是直着掉。
Source code源码
Self-contained — paste it into any HTML file and it runs. No libraries. 完全独立——粘进任意 HTML 文件就能跑,不需要任何库。