鼠标跟随动画，粒子效果
canvas动画，鼠标跟随
项目下载地址：项目包下载
实现逻辑：
a.需要引入创建粒子背景的 JavaScript 库：particles.js
b. 配置动画参数，鼠标跟随参数
效果图：
代码
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>动态效果</title><meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"><link rel="stylesheet" media="screen" href="css/style.css"><link rel="stylesheet" type="text/css" href="css/reset.css"/></head><body><div id="particles-js"></div><!-- scripts --><script src="js/particles.min.js"></script><script type="text/javascript">particlesJS('particles-js',{"particles": {"number": {"value": 40,"density": {"enable": true,"value_area": 800}},"color": {"value": "#ffffff"},"shape": {"type": "circle","stroke": {"width": 0,"color": "#000000"},"polygon": {"nb_sides": 5}},"opacity": {"value": 0.7,"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.6,"width": 1},"move": {"enable": true,"speed": 6,"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": 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": false});</script></body></html>
`
