怎么在vue项目中使用particles实现一个粒子背景效果-创新互联
本篇文章为大家展示了怎么在vue项目中使用particles实现一个粒子背景效果，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。
创新互联公司服务项目包括新城网站建设、
新城网站制作、新城网页制作以及新城网络营销策划等。多年来，我们专注于互联网行业，利用自身积累的技术优势、行业经验、深度合作伙伴关系等，向广大中小型企业、政府机构等提供互联网行业的解决方案，
新城网站推广取得了明显的社会效益与经济效益。目前，我们服务的客户以成都为中心已经辐射到新城省份的部分城市，未来相信会继续扩大服务区域并继续获得客户的支持与信任！
实现过程
安装vue-particles
npm install vue-particles --save-dev
全局配置vue-particles
在main.js里面：
import VueParticles from 'vue-particles'
Vue.use(VueParticles)
使用 vue-particles
在vue文件template标签中：
人 事 管 理
记住我
登录
vue-particles有一个id为默认为particles-js，可以根据这个id来设置样式。设置之后就可以显示了。
#particles-js{
width: 100%;
height: calc(100% - 100px);
position: absolute;
}我在做完这一步时，发现点击按钮触发不了。
后来做了如下修改；加个样式 position: relative;，将button的定位写出相对定位就OK啦，我也不知道啥原因，想着修改之前是好的， 可能 被position: absolute; 影响了，所以就一个个试 position的属性
登录
附：具体参数说明
color: String类型。默认'#dedede'。粒子颜色。
particleOpacity: Number类型。默认0.7。粒子透明度。
particlesNumber: Number类型。默认80。粒子数量。
shapeType: String类型。默认'circle'。可用的粒子外观类型有："circle","edge","triangle", "polygon","star"。
particleSize: Number类型。默认80。单个粒子大小。
linesColor: String类型。默认'#dedede'。线条颜色。
linesWidth: Number类型。默认1。线条宽度。
lineLinked: 布尔类型。默认true。连接线是否可用。
lineOpacity: Number类型。默认0.4。线条透明度。
linesDistance: Number类型。默认150。线条距离。
moveSpeed: Number类型。默认3。粒子运动速度。
hoverEffect: 布尔类型。默认true。是否有hover特效。
hoverMode: String类型。默认true。可用的hover模式有: "grab", "repulse", "bubble"。
clickEffect: 布尔类型。默认true。是否有click特效。
clickMode: String类型。默认true。可用的click模式有: "push", "remove", "repulse", "bubble"。
上述内容就是怎么在vue项目中使用particles实现一个粒子背景效果，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注创新互联成都网站设计公司行业资讯频道。
另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
文章名称：怎么在vue项目中使用particles实现一个粒子背景效果-创新互联
文章分享：
http://njwzjz.com/article/dcsegh.html
