网页粒子特效背景 Particleground.js 的简单引入-优快云博客

本文链接：https://blog.youkuaiyun.com/larger5/article/details/79785627

本文介绍如何利用Particleground.js插件为网页添加动态粒子效果。通过简单的代码配置，实现了粒子跟随鼠标移动的互动效果。文章提供了完整的HTML、CSS及JavaScript示例代码。

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

一、前言

一个简单的网页，布局、样式、交互 等都做得不错了，接下来就该来点网页背景特效了

1、Particleground.js 相关介绍与下载应用

Ⅰ、官方演示站点：http://www.jq22.com/yanshi566
Ⅱ、demo下载链接：https://github.com/jnicol/particleground/archive/master.zip
Ⅲ、git方式下载 demo：git clone https://github.com/jnicol/particleground.git
Ⅳ、参考文章：jQuery粒子系统插件Particleground

2、本文效果图

①粒子自动会运行联合
②鼠标移动所有粒子也会跟着移动

这里写图片描述

二、代码

talk is cheap show me the code

可以修改的地方都有注释
官方 demo 可以删除的地方基本都删了
其他的地方最好不要动

1、代码结构

这里写图片描述

2、index.html

<!doctype html>
<html lang="en" class="no-js">

    <head>
        <meta charset="UTF-8" />
        <title>linhongcun</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="css/style.css" />
        <link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
        <script type='text/javascript' src='js/jquery.particleground.js'></script>
        <script type='text/javascript' src='js/demo.js'></script>
    </head>

    <body>
        <!--背景-->
        <div id="particles">
            <!--内容-->
            <div id="intro">
                <h1>优快云</h1>
                <p>https://blog.youkuaiyun.com/larger5</p>
            </div>
        </div>
    </body>

</html>

3、demo.js

document.addEventListener('DOMContentLoaded', function () {
  particleground(document.getElementById('particles'), {
    //粒子颜色
    dotColor: '#cbda5a',
    //线颜色
    lineColor: '#eda'
  });
  var intro = document.getElementById('intro');
  intro.style.marginTop = - intro.offsetHeight / 2 + 'px';
}, false);

4、style.css

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
body {
    /* 修改背景颜色 */
  background: #354; 
  font-family: 'Montserrat', sans-serif;
  /* 字体颜色 */
  color: #fff;
  line-height: 1.3;
  -webkit-font-smoothing: antialiased;
}

#particles {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#intro {
  position: absolute;
  left: 0;
  top: 50%;
  padding: 0 20px;
  width: 100%;
  text-align: center;
}
h1 {
  text-transform: uppercase;
  font-size: 85px;
  font-weight: 700;
  letter-spacing: 0.015em;
}
p {
  margin: 0 0 30px 0;
  font-size: 24px;
}