动画背景可以为您的网站增添一些视觉吸引力。这将使您的网站更具吸引力和令人难忘，给访问者留下持久的印象。

自定义您的网站背景似乎并不重要。也就是说，它实际上可以塑造访问者对您品牌的第一印象，并影响他们在您网站上的体验。动画背景可以增强您网站的视觉吸引力，使其更具互动性和吸引访问者的眼球。它给人的印象是您的WordPress网站使用高质量和创新的设计。许多网站在想要庆祝特殊场合时也会使用动画效果。例如，您可能会看到电子商务商店在其网页上添加动画雪花或飘落的圣诞树，以营造节日的节日氛围。一些网站还在其网站上使用预加载器背景动画。有了这个，访问者可以感觉到网站正在加载，使他们更有可能耐心等待网页元素出现。

在本指南中，我们将向您展示如何使用 particle.js 添加动画背景。

particle.js 是一个 JavaScript 库，可让您使用粒子创建令人惊叹的视觉效果，粒子是小型图形动画元素。

这些颗粒可以按大小、颜色、形状和运动进行定制。它们还会响应用户交互，例如鼠标移动或点击，为您的网站增加额外的参与度。

现在您知道了 particle.js 是什么，让我们看看如何使用它在WordPress中添加动画背景。

使用 SeedProd，这是市场上最好的WordPress页面构建器插件。它提供了内置且高度可定制的粒子背景功能。

有了它，您可以选择一个已经可用的粒子动画，也可以自己添加一个自定义动画。还可以修改粒子的数量、动画移动和悬停效果，以满足您的喜好。

接下来，只需转到页面»所有页面，然后将光标悬停在页面上，例如主页，关于页面或其他内容。然后，选择“使用SeedProd编辑”按钮。

如果您这边没有出现此选项，请不要担心。

只需单击“编辑”按钮，然后在块编辑器中单击“使用SeedProd编辑”按钮。

您现在应该位于SeedProd的页面构建器中。

只需将光标悬停在要在WordPress中添加粒子背景的页面部分并选择它。如果一个部分的顶部出现紫色边框和工具栏，您将知道您选择了该部分。

单击某个部分后，左侧的“部分”侧边栏应该会出现。

您现在所要做的就是切换到“高级”选项卡并切换“启用粒子背景”设置。

您可以配置多个“粒子背景”设置。

一个是样式，您可以在其中选择任何可用的动画效果，即多边形、空间、雪、雪花、圣诞节、万圣节和自定义。

还有不透明度，用于控制动画的不透明度，以及设置粒子应朝向的方向的流向。

对于某些粒子样式，您也可以自定义其颜色。

但是，对于圣诞节和万圣节，没有颜色设置，因为粒子是图像的形式。

颜色下方是“高级设置”。启用它可让您自定义粒子数、粒子大小、移动速度和启用悬停效果。

使用最后一个功能，粒子将根据鼠标的方向移动。请注意，当您在页面构建器区域中查看网站时，或者如果该部分中的内容占据了该部分的整个空间，则此操作将不起作用。

这就是您需要做的。

完成自定义WordPress粒子背景后，您可以单击右上角的“保存”按钮以发布更改。您还可以选择“预览”按钮来查看粒子背景的外观。

如果可用的动画效果不符合您的需求，那么您也可以创建自定义效果。您应该做的是在“粒子背景”设置中选择“自定义”样式。

在这个网站上，你可以自定义你想要的粒子设计、它的交互性和背景颜色。

在“粒子”设置中，您可以调整粒子数量、颜色、形状、大小、不透明度、连接粒子的线条和运动。

下面是“交互性”。

在这里，您可以调整将鼠标悬停在粒子上并单击它们时的行为方式。

最后，你有“页面背景（css）”。在这里，您可以更改粒子动画的背景颜色并修改其大小、位置和重复次数。

如果需要，您也可以上传自定义背景图片 URL。

完成后，您可以单击底部的“下载当前配置 （json）”按钮。

这将下载粒子背景的 JSON 代码文件，您需要使用文本编辑器应用程序打开该文件。在继续执行后续步骤时，请保持文本编辑器窗口处于打开状态。

现在，让我们回到页面构建器。

再次导航到“高级”设置中的“粒子背景”菜单。然后，将 JSON 代码复制并粘贴到相应的文本框中。

您现在应该在预览部分看到您的粒子背景。

单击“预览”以查看前端的粒子背景，然后单击“保存”以完成更改。

下面是粒子背景可能是什么样子的示例：