javascript - 如何创建“浮动”和“位移”效果？使用反应，CSS3

Question

我希望建立一个有点不同的简单登陆页面。这是我快速整理的模型：

这很简单：

• 中间的大文本标题（例如，网站/企业的名称）
• 周围有很多元素，不同大小的 SVG 图像（在模型中，由彩色矩形和圆形表示）。

我想补充的第一个使这个网站与众不同的效果是元素“浮动”，它们在随机方向上缓慢移动。

如果它们相互碰撞，它们会改变方向，这样它们就不会重叠。

最后，鼠标/光标/点在悬停在元素上时具有类似的位移效果。

这是我在 gif 中捕获此行为的尝试：

我以前从未着手构建类似这样的东西，是否有最适合帮助我实现类似目标的 javascript 库？

在我自己的研究中，我发现TwoJS的粒子沙箱演示似乎展示了我想要构建的一些功能。

标签： javascriptreactjscssanimationfrontend