移动节点粒子链


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

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>HTML5 Particles.js移动节点粒子链</title>
	<style type="text/css">
		body,
		html {
	    background-color: #222;
	    width: 100%;
	    height: 100%;
	    padding: 0;
	    margin: 0;
	    overflow: hidden;
		}
	</style>
</head>
<body>
	<div id="particles-js"></div>

	<script src="https://cdn.bootcss.com/particles.js/2.0.0/particles.js"></script>

	<script type="text/javascript">
		/* ---- particles.js config ---- */
		particlesJS("particles-js", {
		    "particles": {
		        "number": {
		            "value": 300,
		            "density": {
		                "enable": true,
		                "value_area": 1000
		            }
		        },
		        "color": {
		            "value": ["#e40045", "#58636d"]
		        },
		        "shape": {
		            "type": "polygon",
		            "stroke": {
		                "width": 0,
		                "color": "#000000"
		            },
		            "polygon": {
		                "nb_sides": 4
		            }
		        },
		        "opacity": {
		            "value": 0.6,
		            "random": true,
		            "anim": {
		                "enable": false,
		                "speed": 1,
		                "opacity_min": 0.4,
		                "sync": false
		            }
		        },
		        "size": {
		            "value": 5,
		            "random": true,
		            "anim": {
		                "enable": false,
		                "speed": 4,
		                "size_min": 1,
		                "sync": false
		            }
		        },
		        "line_linked": {
		            "enable": true,
		            "distance": 150,
		            "color": "#58636d",
		            "opacity": 0.4,
		            "width": 1
		        },
		        "move": {
		            "enable": true,
		            "speed": 5,
		            "direction": "left",
		            "random": true,
		            "straight": true,
		            "out_mode": "out",
		            "bounce": false,
		            "attract": {
		                "enable": false,
		                "rotateX": 600,
		                "rotateY": 1200
		            }
		        }
		    },
		    "interactivity": {
		        "detect_on": "canvas",
		        "events": {
		            "onhover": {
		                "enable": false,
		                "mode": "grab"
		            },
		            "onclick": {
		                "enable": true,
		                "mode": "repulse"
		            },
		            "resize": true
		        },
		        "modes": {
		            "grab": {
		                "distance": 200,
		                "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
		});
	</script>
	
</body>
</html>