html三维粒子特效代码

打开浏览器，维粒地址栏敲进一个本地html文件，特效屏幕中央瞬间炸开一团星云。代码三千个光点从无到有，维粒旋转，特效聚散，代码像被无形的维粒手搅动。这不是特效视频，不是代码canvas游戏，只是维粒一段不到两百行的代码——你亲手写的三维粒子系统。

核心就三样东西：requestAnimationFrame驱动循环，特效perspective制造景深，代码再加一个数学公式控制粒子轨迹。维粒别被“三维”吓住，特效其实连WebGL都不用碰。代码纯CSS 3D变换加JavaScript数组，足够让粒子在浏览器里跳一场舞。

先看粒子的出生。一个空数组，循环塞进一千个对象，每个对象带着x、y、z坐标，范围限定在-200到200之间。用document.createElement('div')生成实体，每个div设成2像素的圆点，背景色随便挑个亮色——橙红或冰蓝，看你想营造什么氛围。把这些div塞进一个容器，容器设transform-style: preserve-3d，三维空间的地基就打好了。

最妙的动作发生在每帧更新里。粒子不能静止，得让它们动起来。一个简单的正弦波函数就够：y = Math.sin(angle + i) * 50，每个粒子的angle略作偏移，整体看起来就是波浪形流动。再给容器本身加个缓慢旋转，rotateY每帧增加0.3度，粒子群便有了围绕中心公转的错觉。关键在translateZ——把不同粒子放到不同深度，近的大、远的小，透视效果立刻让人眼产生立体感。

我的经验是，别让粒子均匀分布。随机数生成时用Math.pow(Math.random(), 2)做二次加权，让粒子更密集地聚向中心，外围稀疏一些。这样旋转起来有核心，有拖尾，视觉层次比均匀撒点强太多。颜色也别固定，每帧用hsl色相偏移，从紫到青渐变，粒子就像活着的萤火虫。

性能优化有个坑。一千个div同时变更transform，低端手机会卡。解决办法是减少粒子数量到五百，或者改用transform: translate3d()直接写坐标，触发GPU加速。我实际测过，Chrome桌面端跑两千粒子毫无压力，但移动端Safari超过八百就开始掉帧。折中方案：用window.innerWidth判断屏幕尺寸，小屏自动减半粒子数。

写代码时有个细节值得玩味——粒子回弹边界。当粒子的z坐标超出视野范围，别让它无限飞走，而是取模运算让它在空间里循环穿过。就像鱼缸里的鱼，从左边游出去，又从右边游回来。这种循环运动让动画永不终止，观感上仿佛粒子在呼吸。

最后给个实用建议：把粒子容器设成position: fixed，铺满全屏，背景调成深黑或深蓝。粒子颜色选亮色，对比度拉高。鼠标移动时让容器跟着轻微旋转，交互感立刻提升——监听mousemove事件，把鼠标坐标映射成旋转角度就行。

整个文件不过3KB，比一张压缩图片还小。但当你保存运行，看到那团光雾在屏幕里翻涌，会觉得自己像造物主——用数学和像素，捏出了一个微缩宇宙。