亲宝软件园·资讯

展开

vue 粒子特效 vue 粒子特效的代码实例

少侠 人气:0
想了解vue 粒子特效的代码实例的相关内容吗,少侠在本文为您仔细讲解vue 粒子特效的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:vue,粒子特效,下面大家一起来学习吧。

本文介绍了vue 粒子特效的示例代码,分享给大家,具体如下:

实现效果:

没错,你看到的上图那些类似于星座图的点和线,是由vue-particles生成的,而且能与用户鼠标事件产生互动。

传送门:vue-particles

使用教程

npm install vue-particles --save-dev 

main.js文件:

import Vue from 'vue' 
import VueParticles from 'vue-particles' 
Vue.use(VueParticles) 

App.vue 文件——一个简单的例子:

<template> 
  <div id="app">
   <vue-particles color="#dedede"></vue-particles>
  </div>
 </template>

App.vue 文件——一个完整的例子:

<template> 
  <div id="app">
   <vue-particles
    color="#dedede"
    :particleOpacity="0.7"
    :particlesNumber="80"
    shapeType="circle"
    :particleSize="4"
    linesColor="#dedede"
    :linesWidth="1"
    :lineLinked="true"
    :lineOpacity="0.4"
    :linesDistance="150"
    :moveSpeed="3"
    :hoverEffect="true"
    hoverMode="grab"
    :clickEffect="true"
    clickMode="push"
   >
   </vue-particles>
  </div>
 </template>


属性:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

加载全部内容

相关教程
猜你喜欢
用户评论