简单的星空粒子效果

最新推荐文章于 2024-10-18 10:48:51 发布

weixin_33853794

最新推荐文章于 2024-10-18 10:48:51 发布

阅读量1.6k

点赞数

CC 4.0 BY-SA版权

文章标签： java javascript ViewUI

原文链接：http://blog.51cto.com/14168515/2371366

这篇博客介绍了如何创建一个简单的星空粒子效果，主要涉及JavaScript和JavaScript库particles.min.js的应用。作者提供了app.js配置文件的说明，并分享了效果预览链接及下载地址，读者可以通过配置参数自定义粒子效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

简单的星空粒子效果

导入particles.min.js 与 app.js

app.js 是参数配置文件

配置文件参数说明我都帮你们写好了，配置完可以自己把注释删了

{
 "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": {
       "src": "img/github.svg", // 原子的图片可以使用自定义图片 "assets/img/yop.svg" , "http://mywebsite.com/assets/img/yop.png"
       "width": 100, //图片宽度
       "height": 100 //图片高度
     }
   },
   "opacity": {
     "value": 1