vue particles.js怎么实现炫酷的粒子动效登录背景

小天博客 • 02/26 09:37 • 开发 • 阅读 88

本文小编为大家详细介绍“vue particles.js怎么实现炫酷的粒子动效登录背景”，内容详细，步骤清晰，细节处理妥当，希望这篇“vue particles.js怎么实现炫酷的粒子动效登录背景”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。


npminstallparticles.js


{
"particles":{
"number":{
"value":80,
"density":{
"enable":true,
"value_area":800
}
},
"color":{
"value":"#dedede"
},
"shape":{
"type":"polygon",
"stroke":{
"width":0,
"color":"#000000"
},
"polygon":{
"nb_sides":5
},
"image":{
"src":"img/github.svg",
"width":100,
"height":100
}
},
"opacity":{
"value":0.5,
"random":false,
"anim":{
"enable":false,
"speed":0.5,
"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":"#dedede",
"opacity":0.4,
"width":1.8
},
"move":{
"enable":true,
"speed":4,
"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":"repulse"
},
"onclick":{
"enable":true,
"mode":"push"
},
"resize":true
},
"modes":{
"grab":{
"distance":400,
"line_linked":{
"opacity":1
}
},
"bubble":{
"distance":400,
"size":40,
"duration":2,
"opacity":8,
"speed":3
},
"repulse":{
"distance":80,
"duration":0.4
},
"push":{
"particles_nb":4
},
"remove":{
"particles_nb":2
}
}
},
"retina_detect":false}


importparticlesfrom免费云主机域名'particles.js'importPcParticlesfrom"./particles.json"


#particlesId{
position:relative;
width:100%;
height:600px;
background:linear-gradient(0deg,rgb(7,33,99),rgb(3,17,51));
background-repeat:no-repeat;
background-size:cover;
background-position:50%50%;}


mounted(){
particlesJS("particlesId",PcParticles)
}

读到这里，这篇“vue particles.js怎么实现炫酷的粒子动效登录背景”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注百云主机行业资讯频道。

相关推荐: Go语言的数据类型及数组有哪些

今天小编给大家分享一下Go语言的数据类型及数组有哪些的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。Go（又称 Golang）是 Google 的…