首页-教程-Web前端

详解vue particles.js登录背景实现炫酷的粒子动效！

 3154

Vue怎么实现粒子动效？下面本篇文章给大家介绍一下vue particles.js 登录背景实现粒子动效的方法，希望对大家有所帮助！

粒子动画效果像蜘蛛网一样，铺平伸缩，丝滑翻转，给页面增加诸多有趣之处，令人眼前一亮。

简单小结粒子动效在vue中的实践和使用。

一、npm下载

  1. npm install particles.js


二、新建 particles.json

  1. {
  2.     "particles": {
  3.         "number": {
  4.             "value": 80,
  5.             "density": {
  6.                 "enable": true,
  7.                 "value_area": 800
  8.             }
  9.         },
  10.         "color": {
  11.             "value": "#dedede"
  12.         },
  13.         "shape": {
  14.             "type": "polygon",
  15.             "stroke": {
  16.                 "width": 0,
  17.                 "color": "#000000"
  18.             },
  19.             "polygon": {
  20.                 "nb_sides": 5
  21.             },
  22.             "image": {
  23.                 "src": "img/github.svg",
  24.                 "width": 100,
  25.                 "height": 100
  26.             }
  27.         },
  28.         "opacity": {
  29.             "value": 0.5,
  30.             "random": false,
  31.             "anim": {
  32.                 "enable": false,
  33.                 "speed": 0.5,
  34.                 "opacity_min": 0.1,
  35.                 "sync": false
  36.             }
  37.         },
  38.         "size": {
  39.             "value": 3,
  40.             "random": true,
  41.             "anim": {
  42.                 "enable": false,
  43.                 "speed": 40,
  44.                 "size_min": 0.1,
  45.                 "sync": false
  46.             }
  47.         },
  48.         "line_linked": {
  49.             "enable": true,
  50.             "distance": 150,
  51.             "color": "#dedede",
  52.             "opacity": 0.4,
  53.             "width": 1.8
  54.         },
  55.         "move": {
  56.             "enable": true,
  57.             "speed": 4,
  58.             "direction": "none",
  59.             "random": false,
  60.             "straight": false,
  61.             "out_mode": "out",
  62.             "bounce": false,
  63.             "attract": {
  64.                 "enable": false,
  65.                 "rotateX": 600,
  66.                 "rotateY": 1200
  67.             }
  68.         }
  69.     },
  70.     "interactivity": {
  71.         "detect_on": "canvas",
  72.         "events": {
  73.             "onhover": {
  74.                 "enable": true,
  75.                 "mode": "repulse"
  76.             },
  77.             "onclick": {
  78.                 "enable": true,
  79.                 "mode": "push"
  80.             },
  81.             "resize": true
  82.         },
  83.         "modes": {
  84.             "grab": {
  85.                 "distance": 400,
  86.                 "line_linked": {
  87.                     "opacity": 1
  88.                 }
  89.             },
  90.             "bubble": {
  91.                 "distance": 400,
  92.                 "size": 40,
  93.                 "duration": 2,
  94.                 "opacity": 8,
  95.                 "speed": 3
  96.             },
  97.             "repulse": {
  98.                 "distance": 80,
  99.                 "duration": 0.4
  100.             },
  101.             "push": {
  102.                 "particles_nb": 4
  103.             },
  104.             "remove": {
  105.                 "particles_nb": 2
  106.             }
  107.         }
  108.     },
  109.     "retina_detect": false
  110. }


三、页面中引入

  1. import particles from 'particles.js'import PcParticles from "./particles.json"


四、页面渲染

a、

  1. <div class="login" id="particlesId"></div>

b、

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

c、

  1. mounted(){
  2.     particlesJS("particlesId",PcParticles)
  3. }


五，效果图

详解vue particles.js登录背景实现炫酷的粒子动效！

TAG标签：
本文网址：https://www.zztuku.com/detail-13519.html
站长图库 - 详解vue particles.js登录背景实现炫酷的粒子动效！
申明：本文转载于《learnku》，如有侵犯，请 联系我们 删除。

评论（0）条

您还没有登录，请 登录 后发表评论！

提示：请勿发布广告垃圾评论，否则封号处理！！

    编辑推荐