javascript - 如何在鼠标移动时赋予效果粒子，在画布中悬停时如何赋予发光效果

Question

我希望这个问题仍然在 Stack Overflow 中被接受，因为我想知道的是产生这种效果的技术。最近我发现了一个非常酷的网站着陆动画，它可以在我们移动鼠标时产生光粒子效果（据我所知，这看起来像 parallax.js），在特定位置悬停时会产生发光效果。

我完全知道我们可以使用 css 和使用 javascript 的光粒子实现悬停，但是如何在使用像本网站这样的画布时实现这一点？当我试图检查这个网站的元素时，似乎使用画布来实现这一点，所以我很好奇我是否想制作这样的网站，我必须学习什么技术，因为我很困惑从哪里开始如果我想达到这样的效果吗？

参考网站：Genshin Impact 登陆页面

我想要达到的效果：

有人可以帮助我或告诉我如果我想实现这一点，我必须从哪里开始，因为我想尝试学习使用 css 和 Js 制作这种很酷的效果？

我读过的一些文章：

1. 2 种方式来创建动画粒子背景

2. 粒子动画codepen

3. 粒子动画代码片段

4. 缓动画布中的动画/

5. 如何实现这种悬停效果

标签： javascripthtmlcssanimationcanvas

Answer 1

像这样的网站是使用 WebGL 构建的，WebGL 使用 GPU 来呈现这些 3d 效果。到目前为止，只能通过画布使用 GPU。有各种各样的 javascript 库，您可以通过它们获得这样的结果。其中最受欢迎的是three.js。如今，它用于构建令人惊叹的 3d 网站。其他一些库是 babylon.js、particle.js 等。