使用 Particles.js 实现网页粒子动态背景
创建三个文件：
index.hhtml
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Particles.js Background</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="particles-js"></div>
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<script src="script.js"></script>
</body>
</html>
style.css
body {
margin: 0;
overflow: hidden;
}
#particles-js {
width: 100%;
height: 100%;
position: fixed;
z-index: -1;
background-color: black;
}
script.js
document.addEventListener("DOMContentLoaded", function() {
// 配置 Particles.js
particlesJS("particles-js", {
particles: {
number: {
value: 80,
density: {
enable: true,
value_area: 800
}
},
color: {
value: "#ffffff"
},
shape: {
type: "circle",
stroke: {
width: 0,
color: "#000000"
},
polygon: {
nb_sides: 5
}
},
opacity: {
value: 5,
random: false,
anim: {
enable: false,
speed: 1,
opacity_min: 0.1,
sync: false
}
},
size: {
value: 3,
random: true,
anim: {
enable: false,
speed: 40,
size_min: 0.1,
sync: false
}
},
line_linked: {
enable: true,
distance: 150,
color: "#ffffff",
opacity: 0.8,
width: 2
},
move: {
enable: true,
speed: 1,
direction: "none",
random: false,
straight: false,
out_mode: "out",
bounce: false,
attract: {
enable: false,
rotateX: 600,
rotateY: 1200
}
}
},
interactivity: {
detect_on: "canvas",
events: {
onhover: {
enable: true,
mode: "grab"
},
onclick: {
enable: true,
mode: "push"
},
resize: true
},
modes: {
grab: {
distance: 140,
line_linked: {
opacity: 1
}
},
bubble: {
distance: 400,
size: 40,
duration: 2,
opacity: 8,
speed: 3
},
repulse: {
distance: 200,
duration: 0.4
},
push: {
particles_nb: 4
},
remove: {
particles_nb: 2
}
}
},
retina_detect: true
});
});
双击index.html即可在浏览器打开，效果图如下：
如果你需要进行自定义修改，下面几个修改点你可能感兴趣：
1.粒子移动速度
修改move.speed 参数,该参数控制粒子的移动速度，数值越大，移动速度越快，数值越小，移动速度越慢。
move: {
enable: true,
speed: 6,
direction: "none",
random: false,
straight: false,
out_mode: "out",
bounce: false,
attract: {
enable: false,
rotateX: 600,
rotateY: 1200
}
}
2.点的亮度和大小：
size.value: 控制粒子的大小，默认值为 3，数值越大，粒子越大。
color.value: 控制粒子的颜色，默认为白色。你可以设置为十六进制颜色值，例如 “#ff0000” 表示红色。
opacity.value: 控制粒子的透明度，默认值为 1，数值范围从 0 到 1，数值越大，粒子越不透明。
3.线条的亮度和大小：
line_linked.opacity: 控制线条的透明度，默认值为 0.4，数值范围从 0 到 1，数值越大，线条越不透明。
line_linked.width: 控制线条的宽度，默认值为 1，数值越大，线条越粗。