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

Question

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

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

参考网站：Genshin Impact landing page

我想要达到的效果：

如果我想尝试学习使用 css 和 Js 制作这种很酷的效果，有人可以帮助我或告诉我应该从哪里开始吗？

我读过的一些文章：

1. 2-ways-to-create-an-animated-particle-background

2. particles-animation-codepen

3. particle-animation-code-snippets

4. easing-animations-in-canvas/

5. how-to-achieve-this-hover-effect

Answer 1

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