Vue登錄頁面的動(dòng)態(tài)粒子背景插件實(shí)現(xiàn)
動(dòng)態(tài)粒子效果如下：
安裝插件
npm install vue-particles --save-dev
在main.js文件中全局引入
import VueParticles from 'vue-particles' Vue.use(VueParticles)
在vue文件中使用
<vue-particles
color="#409EFF"
:particleOpacity="0.7"
:particlesNumber="60"
shapeType="circle"
:particleSize="6"
linesColor="#409EFF"
:linesWidth="1"
:lineLinked="true"
:lineOpacity="0.4"
:linesDistance="150"
:moveSpeed="3"
:hoverEffect="true"
hoverMode="grab"
:clickEffect="true"
clickMode="push">
</vue-particles>
將動(dòng)態(tài)粒子作為背景圖來用，當(dāng)有新的div需要呈現(xiàn)時(shí)，會(huì)發(fā)現(xiàn)div是不能覆蓋vue-particles 內(nèi)容的，會(huì)依次靠后顯示。因此，加入了position:absolute，當(dāng)有新div盒子的時(shí)候，設(shè)置為position:relative
<style>
#particles-js {
width: 100%;
height: calc(100% - 100px);
position: absolute;
}
</style>
關(guān)于以上屬性的介紹：
vue-particles的屬性：
color: String類型。默認(rèn)'#dedede'。粒子顏色。
particleOpacity: Number類型。默認(rèn)0.7。粒子透明度。
particlesNumber: Number類型。默認(rèn)80。粒子數(shù)量。
shapeType: String類型。默認(rèn)'circle'。可用的粒子外觀類型有：“circle”,“edge”,“triangle”, “polygon”,“star”。
particleSize: Number類型。默認(rèn)80。單個(gè)粒子大小。
linesColor: String類型。默認(rèn)'#dedede'。線條顏色。
linesWidth: Number類型。默認(rèn)1。線條寬度。
lineLinked: 布爾類型。默認(rèn)true。連接線是否可用。
lineOpacity: Number類型。默認(rèn)0.4。線條透明度。
linesDistance: Number類型。默認(rèn)150。線條距離。
moveSpeed: Number類型。默認(rèn)3。粒子運(yùn)動(dòng)速度。
hoverEffect: 布爾類型。默認(rèn)true。是否有hover特效。
hoverMode: String類型。默認(rèn)true。可用的hover模式有: “grab”, “repulse”, “bubble”。
clickEffect: 布爾類型。默認(rèn)true。是否有click特效。
clickMode: String類型。默認(rèn)true。可用的click模式有: “push”, “remove”, “repulse”, “bubble”
到此這篇關(guān)于Vue登錄頁面的動(dòng)態(tài)粒子背景插件實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)Vue 動(dòng)態(tài)粒子背景內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue3中Watch、Watcheffect、Computed的使用和區(qū)別解析
Watch、Watcheffect、Computed各有優(yōu)劣,選擇使用哪種方法取決于應(yīng)用場景和需求,watch?適合副作用操作,watchEffect適合簡單的自動(dòng)副作用管理,computed?適合聲明式的派生狀態(tài)計(jì)算,本文通過場景分析Vue3中Watch、Watcheffect、Computed的使用和區(qū)別,感興趣的朋友一起看看吧2024-07-07
Vue Element 分組+多選+可搜索Select選擇器實(shí)現(xiàn)示例
這篇文章主要介紹了Vue Element 分組+多選+可搜索Select選擇器實(shí)現(xiàn)示例,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07
VUE+Element-ui實(shí)戰(zhàn)之使用el-calendar日歷自定義顯示內(nèi)容
這篇文章主要介紹了VUE+Element-ui實(shí)戰(zhàn)之使用el-calendar日歷自定義顯示內(nèi)容方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
Vue.js實(shí)現(xiàn)按鈕的動(dòng)態(tài)綁定效果及實(shí)現(xiàn)代碼
本文通過實(shí)例代碼給大家介紹了Vue.js實(shí)現(xiàn)按鈕的動(dòng)態(tài)綁定效果，代碼簡單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的的朋友參考下吧2017-08-08
vue3輸入框生成的時(shí)候如何自動(dòng)獲取焦點(diǎn)詳解
記錄一下自己最近開發(fā)vue3.0的小小問題,下面這篇文章主要給大家介紹了關(guān)于vue3輸入框生成的時(shí)候如何自動(dòng)獲取焦點(diǎn)的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09
今天小編就為大家分享一篇快速解決vue-cli在ie9+中無效的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
生命周期鉤子又被叫做生命周期時(shí)間,生命周期函數(shù),生命周期鉤子就是vue生命周期中出發(fā)的各類事件,這些事件被稱為生命周期鉤子,下面這篇文章主要給大家介紹了關(guān)于Vue生命周期鉤子的相關(guān)資料,需要的朋友可以參考下2022-06-06
這篇文章主要介紹了vue項(xiàng)目中禁用瀏覽器緩存配置案例,本篇文章通過簡要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-09-09
Element UI 自定義正則表達(dá)式驗(yàn)證方法
今天小編就為大家分享一篇Element UI 自定義正則表達(dá)式驗(yàn)證方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了mpvue+vant app搭建微信小程序的方法步驟，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-02-02