HOVER · 悬停交互
参数调改
PLAYGROUND
球体半径--radius_px
70150
粒子数量--count
24160
粒子尺寸--dot_px
27
自转周期--dur_s
840
粒子颜色--dot_color
实现要点
NOTES- 01
点位用斐波那契球面分布(纬度均匀 + 黄金角经度步进),比经纬网格均匀得多,任何角度看不出接缝;JS 只在初始化生成一次 DOM,运行期零计算。
- 02
旋转完全交给 CSS:外层 .wobble 做 rotateX ±14° 摆动、内层 .sphere 匀速 rotateY,两个合成器动画叠加出『陀螺』轨迹;will-change 只加在这两层,不给每个点(父级动画已整体合成)。
- 03
深度感来自 perspective:近处的点被透视放大、远处的缩小,无需 JS 逐帧排序缩放;点与点互不遮挡,是刻意的『线框星云』风格,改小 dot_px 更通透。
- 04
全部动效 transform-only:每颗点只有一个静态 3D 变换,旋转由祖先元素承担;count 上限 160,再多每点一层的内存开销开始可感。
- 05
悬停双层动画同时 play-state:paused;reduced-motion 下动画全部停用,球以固定姿态静置仍完整可读。
- 06
无交互依赖,触屏表现一致;生产可扩展 pointer 拖拽改自转相位或 deviceorientation 倾斜。
源代码
SOURCE
加载源代码…