今天发现一个粒子动画的插件下个笔记做个备用：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #page1 { background: url(images/mask.png) left center no-repeat; height: 750px; padding-top: 87px; background-size: cover; /* Retina display */ @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) { background-image: url(images/mask@2x.png); background-size: 1440px 750px; } } .topside { position: relative; max-width: 1200px; margin: 0 auto; } .graphics { position: relative; top: 0; // background: url(images/graphics.png) 22px center no-repeat; // background-size: cover; height: 400px; /* Retina display */ // @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) { // background-image: url(images/graphics@2x.png); // background-size: 1189px 427px; // } } </style> <script src="js/jquery-2.2.0.min.js"></script> <script src="js/particles.js"></script> <script src="js/swiper.min.js"></script> </head> <body> <div class="page" id="page1"> <div class="topside"> <div class="graphics" id="particles-js"></div> </div> </div> </body> </html> <script> $(function(){ //粒子动画 particlesJS('particles-js', { particles: { color: '#fff', shape: 'circle', // "circle", "edge" or "triangle" opacity: 1, size: 4, size_random: true, nb: 150, line_linked: { enable_auto: true, distance: 100, color: '#fff', opacity: 1, 1, condensed_mode: { enable: false, rotateX: 600, rotateY: 600 } }, anim: { enable: true, speed: 1 } }, interactivity: { enable: true, mouse: { distance: 300 }, detect_on: 'canvas', // "canvas" or "window" mode: 'grab', line_linked: { opacity: .5 }, events: { onclick: { enable: true, mode: 'push', // "push" or "remove" nb: 4 } } }, /* Retina Display Support */ retina_detect: true }); }); </script>