插件描述：基于particles.js开发的星空粒子效果
导入particles.min.js 与 app.js
app.js 是参数配置文件
配置文件参数说明我都帮你们写好了，配置完可以自己把注释删了
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 | { "particles": { "number": { "value": 160,//数量 "density": { "enable": true, //启用粒子的稀密程度 "value_area": 800 //区域散布密度大小 } }, "color": { "value": "#ffffff" //原子的颜色 }, "shape": { "type": "circle", //原子的形状 "circle" ,"edge" ,"triangle" ,"polygon" ,"star" ,"image" ,["circle", "triangle", "image"] "stroke": { "width": 0, //原子的宽度 "color": "#000000" //原子颜色 }, "polygon": { "nb_sides": 5 // 原子的多边形边数 }, "image": { "width": 100, //图片宽度 "height": 100 //图片高度 } }, "opacity": { "value": 1, //不透明度 "random": true, //随机不透明度 "anim": { "enable": true, //渐变动画 "speed": 1, // 渐变动画速度 "opacity_min": 0, //渐变动画不透明度 "sync": true } }, "size": { "value": 3, //原子大小 "random": true, // 原子大小随机 "anim": { "enable": false, // 原子渐变 "speed": 4, //原子渐变速度 "size_min": 0.3, "sync": false } }, "line_linked": { "enable": false, //连接线 "distance": 150, //连接线距离 "color": "#ffffff", //连接线颜色 "opacity": 0.4, //连接线不透明度 "width": 1 //连接线的宽度 }, "move": { "enable": true, //原子移动 "speed": 1, //原子移动速度 "direction": "none", //原子移动方向 "none" ,"top" ,"top-right" ,"right" ,"bottom-right" ,"bottom" ,"bottom-left" ,"left" ,"top-left" "random": true, //移动随机方向 "straight": false, //直接移动 "out_mode": "out", //是否移动出画布 "bounce": false, //是否跳动移动 "attract": { "enable": false, // 原子之间吸引 "rotateX": 600, //原子之间吸引X水平距离 "rotateY": 600 //原子之间吸引Y水平距离 } } }, "interactivity": { "detect_on": "canvas", //原子之间互动检测 "canvas", "window" "events": { "onhover": { "enable": true, //悬停 "mode": "bubble" //悬停模式 "grab"抓取临近的,"bubble"泡沫球效果,"repulse"击退效果,["grab", "bubble"] }, "onclick": { "enable": false, //点击效果 "mode": "repulse" //点击效果模式 "push" ,"remove" ,"bubble" ,"repulse" ,["push", "repulse"] }, "resize": true // 互动事件调整 }, "modes": { "grab": { "distance": 100, //原子互动抓取距离 "line_linked": { "opacity": 0.8 //原子互动抓取距离连线不透明度 } }, "bubble": { "distance": 250, //原子抓取泡沫效果之间的距离 "size": 4, // 原子抓取泡沫效果之间的大小 "duration": 2, //原子抓取泡沫效果之间的持续事件 "opacity": 1, //原子抓取泡沫效果透明度 "speed": 3 }, "repulse": { "distance": 400, //击退效果距离 "duration": 0.4 //击退效果持续事件 }, "push": { "particles_nb": 4 //粒子推出的数量 }, "remove": { "particles_nb": 2 } } }, "retina_detect": true} |
特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com
- 上一个特效： 滑动验证登录
- 下一个特效： vue健康问卷调查（原创）