超酷炫粒子背景插件—particles.js

最新推荐文章于 2025-06-05 09:06:20 发布

家师曹先生

最新推荐文章于 2025-06-05 09:06:20 发布

阅读量3.2k

点赞数 4

CC 4.0 BY-SA版权

分类专栏：插件文章标签： particles.js css js html 插件

本文链接：https://blog.csdn.net/weixin_42950079/article/details/104707909

插件专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了如何在项目中使用particles.js创建炫酷的粒子背景效果。从下载资源到引入脚本，再到调整配置和样式，一步步指导读者实现理想中的视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

GitHub-教程-下载

1）先到github中下载particles.js-master.zip，下载下来的文件中有一个demo案例。

2）将demo文件中的particles.min.js、style.css、app.js、particles.json copy到我们项目里

用法：

第一步，在html中引入particles.min.js、style.css、app.js脚本文件，注意引用地址一定要确保无误

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超炫酷粒子背景</title>
    <link rel="stylesheet" href="../css/style.css">
</head>
<body>

    <script src="../lib/particles/particles.min.js"></script>
    <script src="../js/app.js"></script>
</body>
</html>

第二步，修改我们引入的app.js文件，下面是我们copy进来时的内容，但由于我复制particles.json到项目里后，particles.json文件的存放目录发生的改变，所以需要修改particles.json的引用路径，即修改assets/particles.json

/* particlesJS.load(@dom-id, @path-json, @callback (optional)); */
particlesJS.load('particles-js', 'assets/particles.json', function() {
  console.log('callback - particles.js config loaded');
});

改

/* particlesJS.load(@dom-id, @path-json, @callback (optional)); */
particlesJS.load('particles-js', 'particles.json', function() {
    console.log('callback - particles-js config loaded');
});

第三步，在html中定义一个<div id="particles-js"></div>作为particles.js的容器，然后就可以在它的后面定义我们自己的页面内容了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超炫酷粒子背景</title>
    <link rel="stylesheet" href="../css/style.css">
</head>
<body>
	<!-- particles.js container -->
	<div id="particles-js"></div>
	
	<!-- 我们自己定义的内容 -->
	<div></div>

    <script src="../lib/particles/particles.min.js"></script>
    <script src="../js/app.js"></script>
</body>
</html>

ok，完成这些步骤之后，我们就可以查看一下效果了。

我发现已经产生一定的效果了，但很明显，这并不是我们想要的效果，仅仅只是上面那部分产生效果而已，而我们的内容区并没有该效果。这是因为<div id="particles-js"></div>把我们定义的内容推下去了，所以我们的内容区没有该效果。所以还需要我们做一步修改。
cd4356

第四步，修改style.css文件。打开引入的style.css文件，在#particles-js{}中添加position: fixed;样式

/* ---- particles.js container ---- */

#particles-js{
  position: fixed;  /*添加这一行*/
  width: 100%;
  height: 100%;
  /*背景颜色*/
  /*background-color: #b61924;*/
  /*背景图片*/
  background: url("../image/9.png") !important;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}

ok，再来查看一下效果，我们想要的效果出来了。这一次粒子背景真正作用在我们的内容中了
cd4356

无意间发现particles.js会与一些ui框架的css样式发生冲突，所以需要再次修改particles.js插件的style.css文件。只保留下面这部分，其它的全部删除掉

style.css

/* ---- particles.js container ---- */

#particles-js{
  position: fixed;  /*添加这一行*/
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
}