図は、点や線の星座に似てい
ているvue-particlesだけでなく、独自の動的な生成、およびユーザーのマウスイベントと対話することができます。
これは、動的効果の非常に珍しい種類です
あなたは、サードパーティが依存しているインストールする必要があり、Vueのプロジェクトを使用することができます
手順を使用します
インストール1.
npm install vue-particles --save-dev
复制代码若しくは
npm i vue-particles
复制代码2.参考文献
でmain.js言及
import VueParticles from 'vue-particles'
Vue.use(VueParticles)
复制代码3.
次のタグファイルVUEで直接使用することができます
<template>
<div id="app">
<vue-particles
color="#fff"
:particleOpacity="0.7"
:particlesNumber="60"
shapeType="circle" :particleSize="4" linesColor="#fff" :linesWidth="1" :lineLinked="true" :lineOpacity="0.4" :linesDistance="150" :moveSpeed="2" :hoverEffect="true" hoverMode="grab" :clickEffect="true" clickMode="push" > </vue-particles> </div> </template> 复制代码そして、それが表示されます
4.設定
color: String类型デフォルトの「#dedede」。パーティクルの色。particleOpacity: Number类型0.7デフォルト。パーティクル透明度。particlesNumber: Number类型デフォルトは80です。粒子の数。shapeType: String类型デフォルトの「円」、粒子タイプの外観が利用可能である：「円」、「エッジ」、「三角形」、「多角形」、「星」。particleSize: Number类型デフォルトは80です。単一粒子サイズ。linesColor: String类型デフォルトの「#dedede」。線の色。linesWidth: Number类型デフォルト1。線幅。lineLinked: 布尔类型真デフォルト。ケーブルが利用可能です。lineOpacity: Number类型0.4デフォルト。ラインの不透明度。linesDistance: Number类型150デフォルト。直線距離。moveSpeed: Number类型デフォルト3。粒子速度。hoverEffect: 布尔类型真デフォルト。ホバー効果があります。hoverMode: String类型真デフォルト。ホバーモードが用意されています。「グラブ」、「レパルス」、「バブル」。clickEffect: 布尔类型真デフォルト。クリック効果があります。clickMode: String类型真デフォルト。クリックモードが用意されています。「プッシュ」、「削除」、「レパルス」、「バブル」。
あなたは、背景画像が必要な場合は、するラベルを追加することができclass、直接背景を追加します
5.小さな問題
通常、我々は、ラベルに直接導入され、
その後、ラベルの後ろに、この上で、独自のコンテンツを置きます
しかし、この場合には、背景としてパーティクルエフェクトではなく、あなたがダウンし、独自のコンテンツのプッシュを書き込みます
パーティクルエフェクトは上に、ここにあなたのコンテンツがあり、それは背景として設定することはできません
今回我々は、このラベルのパーティクルエフェクト置くことができるセット局在を position:absolute
しかし、時にはそれが私たちの要素の一部を遮断されますので、あなたは絶対的な位置に置くことができposition:fixed、問題を解決することがあり
使用時要するに、通常、あなたが私たちのバックグラウンドの影響として、この効果を作るためにターゲットに使用したいです
。