MOTION HUB

3D 粒子球

Particle Sphere
#sphere-particles · 57/72
HOVER · 悬停交互

参数调改

PLAYGROUND
球体半径--radius_px
70150
px
粒子数量--count
24160
粒子尺寸--dot_px
27
px
自转周期--dur_s
840
s
粒子颜色--dot_color

实现要点

NOTES
  1. 01

    点位用斐波那契球面分布(纬度均匀 + 黄金角经度步进),比经纬网格均匀得多,任何角度看不出接缝;JS 只在初始化生成一次 DOM,运行期零计算。

  2. 02

    旋转完全交给 CSS:外层 .wobble 做 rotateX ±14° 摆动、内层 .sphere 匀速 rotateY,两个合成器动画叠加出『陀螺』轨迹;will-change 只加在这两层,不给每个点(父级动画已整体合成)。

  3. 03

    深度感来自 perspective:近处的点被透视放大、远处的缩小,无需 JS 逐帧排序缩放;点与点互不遮挡,是刻意的『线框星云』风格,改小 dot_px 更通透。

  4. 04

    全部动效 transform-only:每颗点只有一个静态 3D 变换,旋转由祖先元素承担;count 上限 160,再多每点一层的内存开销开始可感。

  5. 05

    悬停双层动画同时 play-state:paused;reduced-motion 下动画全部停用,球以固定姿态静置仍完整可读。

  6. 06

    无交互依赖,触屏表现一致;生产可扩展 pointer 拖拽改自转相位或 deviceorientation 倾斜。

源代码

SOURCE

加载源代码…