📌  相关文章
📜  如何在 JavaScript 项目中使用 Particle.js ?

📅  最后修改于: 2021-11-03 06:45:50             🧑  作者: Mango

Particles.js是一个轻量级的 JavaScript 库,用于创建看起来像多边形顶点的粒子。我们还可以通过将鼠标悬停在粒子上来进行交互,并通过单击粒子来创建更多粒子。

这是particle.js的例子

我们可以在我们的投资组合中使用这个库,这肯定会吸引很多用户并且在网站上看起来不错。

安装过程:

1.从以下链接下载particles.js库,解压并将其复制到您的项目文件夹中。 https://vincentgarreau.com/particles.js/

2. 创建两个文件index.htmlstyle.css。

在 index.html文件中写入以下代码。

HTML


  

    particles.js
  
    
    

  

    
    
        
            

GeeksforGeeks

            

                A computer Science                  portal for geeks             

        
    
                    


HTML


  

    particles.js
    
    

  

    
    
        
            

GeeksforGeeks

            

A computer Science portal for geeks

        
    
                    


文件名:style.css

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 
      'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
      'Open Sans', 'Helvetica Neue', sans-serif;
}
.heading {
    position: absolute;
    text-align: center;
    top: 30%;
    width: 100%;
}
.heading h1 {
    color: limegreen;
    font-size: 70px;
}
.heading h3 {
    color: wheat;
    font-size: 20px;
}
#particles-js {
    background: black;
    height: 100vh;
}

3. 将上述代码分别保存在各自的文件中并运行index.html文件。

注意:如果您使用的是节点应用程序,那么我们可以通过以下命令简单地下载particles.js节点模块。

npm install particles.js

从node_modules文件夹中导入particles.jsapp.js文件,编写html代码。

HTML



  

    particles.js
    
    

  

    
    
        
            

GeeksforGeeks

            

A computer Science portal for geeks

        
    
                    

我们可以通过修改 app.js来改变粒子的属性和交互性,然后看看魔法。

输出: