经典点线粒子链接


将以下代码粘贴到html文件中即可出现上述效果

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>创建粒子背景实例1</title>
		<style type="text/css">
			body,
			html {
				background-color: #333;
				width: 100%;
				height: 100%;
				padding: 0;
				margin: 0;
				overflow: hidden;
			}
		</style>
	</head>

	<body>
		<div id="myParticlesJs"></div>

		<script src="https://cdn.bootcss.com/particles.js/2.0.0/particles.js"></script>
		<script type="text/javascript">
			particlesJS("myParticlesJs", {

				"particles": {

					"number": {
						"value": 50, //粒子数量
						"density": { //粒子细密程度
							"enable": true, //启用
							"value_area": 1000 //每一个粒子占据的空间
						}
					},

					"color": {
						"value": "#fff" //粒子颜色
					},

					"shape": {
						"type": "circle", //粒子形状(”circle” “edge” “triangle” “polygon” “star” “image”)
						"stroke": {
							"width": 0, //粒子宽度
							"color": "#f40" //粒子颜色
						},

						"polygon": {
							"nb_sides": 5 //粒子的多边形边数
						},

						"image": {
							"src": "img/github.svg",
							"width": 100,
							"height": 100
						}
					},

					"opacity": {
						"value": 1, //不透明度
						"random": true, //随机不透明度
						"anim": { //渐变动画
							"enable": true,
							"speed": 2, //渐变动画速度
							"opacity_min": 0.3, //渐变动画不透明度
							"sync": false //渐变动画是否同步
						}
					},

					"size": {
						"value": 4, //粒子大小
						"random": true, //粒子大小是否随机
						"anim": {
							"enable": true,
							"speed": 3,
							"size_min": 0.3,
							"sync": false
						}
					},

					"line_linked": {
						"enable": true, //是否为连接线
						"distance": 140, //连接线距离
						"color": "#ffffff", //连接线颜色
						"opacity": 0.4, //连接线不透明度
						"width": 1 //连接线的宽度
					},

					"move": {
						"enable": true, //粒子是否移动
						"speed": 3,
						"direction": "none", //粒子移动方向( "none","top","top-right","right","bottom-right","bottom","bottom-left","left","top-left")
						"random": true, //粒子移动方向随机
						"straight": false, //直接移动
						"out_mode": "bounce", //是否溢出画布("out", "bounce")
						"bounce": true, //是否跳动移动
						"attract": {
							"enable": true, //粒子之间是否吸引
							"rotateX": 600, //粒子之间吸引X水平距离
							"rotateY": 600 //粒子之间吸引Y水平距离
						}
					}
				},

				"interactivity": {
					"detect_on": "canvas", //粒子之间互动检测("canvas", "window")

					"events": {
						"onhover": {
							"enable": true, //是否悬停
							"mode": "grab" //悬停模式("grab":抓取临近的,"bubble":泡沫球效果,"repulse"  击退效果)
						},

						"onclick": {
							"enable": true, //是否点击
							"mode": "repulse" //点击效果("push","remove","bubble","repulse" )
						},
						"resize": true //互动事件调整
					},

					"modes": {
						"grab": {
							"distance": 200, //粒子互动抓取距离
							"line_linked": {
								"opacity": .5 //在互抓下连接线的不透明度
							}
						},

						"bubble": {
							"distance": 250,
							"size": 0,
							"duration": 2,
							"opacity": 0,
							"speed": 3
						},

						"repulse": {
							"distance": 400,
							"duration": 0.4
						},

						"push": {
							"particles_nb": 4 //粒子推出的数量
						},

						"remove": {
							"particles_nb": 2
						}
					}
				},
				"retina_detect": true
			});
		</script>
	</body>

</html>