vue3中使用VueParticles實現(xiàn)粒子動態(tài)背景效果
更新時間：2022年05月18日 10:55:16 作者：Rabbit_
為了提高頁面展示效果，特別類似于登錄界面內(nèi)容比較單一的，粒子效果作為背景經(jīng)常使用到，vue工程中利用vue-particles可以很簡單的實現(xiàn)頁面的粒子背景效果，本文給大家分享vue粒子動態(tài)背景效果實現(xiàn)代碼，需要的朋友參考下吧
- 在某項目見到粒子動畫背景，也想將這個動畫效果用在自己的項目上。
先看效果 實際是動圖的. 還不太會搞動圖 湊合看下
particles.vue3官網(wǎng)
可以仔細(xì)看下這里 有案例跟文檔
官網(wǎng) Demo
好了直接進(jìn)入主題 安裝使用
npm install particles.vue3
import { createApp } from 'vue'
import App from './App.vue'
//Particles
import Particles from 'particles.vue3'
const app = createApp(App)
app.use(Particles)
app.mount('#app')Vue3 語法糖中使用
<template>
<Particles id="tsparticles" class="login__particles" :options="particles" />
</template>
<script setup>
//背景動畫
import { particles } from '../components/particles/particles.js'
</script>配置單獨寫到文件particles.js，代碼看起來簡潔些
// 背景動畫設(shè)置
// 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。單個粒子大小。
// 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。粒子運動速度。
// hoverEffect: 布爾類型。默認(rèn)true。是否有hover特效。
// hoverMode: String類型。默認(rèn)true?？捎玫膆over模式有: "grab", "repulse", "bubble"。
// clickEffect: 布爾類型。默認(rèn)true。是否有click特效。
// clickMode: String類型。默認(rèn)true?？捎玫腸lick模式有: "push", "remove", "repulse", "bubble"。
export const particles =
{
"autoPlay": true,
"background": {
"color": {
"value": "#000000"
},
"image": "",
"position": "50% 50%",
"repeat": "no-repeat",
"size": "cover",
"opacity": 1
},
"backgroundMask": {
"composite": "destination-out",
"cover": {
"color": {
"value": "#fff"
},
"opacity": 1
},
"enable": false
},
"fullScreen": {
"enable": true,
"zIndex": 0
},
"detectRetina": true,
"duration": 0,
"fpsLimit": 120,
"interactivity": {
"detectsOn": "window",
"events": {
"onClick": {
"enable": true,
"mode": "push"
},
"onDiv": {
"selectors": [],
"enable": false,
"mode": [],
"type": "circle"
},
"onHover": {
"enable": false,
"mode": "repulse",
"parallax": {
"enable": false,
"force": 2,
"smooth": 10
}
},
"resize": true
},
"modes": {
"attract": {
"distance": 200,
"duration": 0.4,
"easing": "ease-out-quad",
"factor": 1,
"maxSpeed": 50,
"speed": 1
},
"bounce": {
"distance": 200
},
"bubble": {
"distance": 400,
"duration": 2,
"mix": false,
"opacity": 0.8,
"size": 40
},
"connect": {
"distance": 80,
"links": {
"opacity": 0.5
},
"radius": 60
},
"grab": {
"distance": 400,
"links": {
"blink": false,
"consent": false,
"opacity": 1
}
},
"light": {
"area": {
"gradient": {
"start": {
"value": "#ffffff"
},
"stop": {
"value": "#000000"
}
},
"radius": 1000
},
"shadow": {
"color": {
"value": "#000000"
},
"length": 2000
}
},
"push": {
"default": true,
"groups": [
"z5000",
"z7500",
"z2500",
"z1000"
],
"quantity": 4
},
"remove": {
"quantity": 2
},
"repulse": {
"distance": 200,
"duration": 0.4,
"factor": 100,
"speed": 1,
"maxSpeed": 50,
"easing": "ease-out-quad"
},
"slow": {
"factor": 3,
"radius": 200
},
"trail": {
"delay": 1,
"pauseOnStop": false,
"quantity": 1
}
}
},
"manualParticles": [],
"motion": {
"disable": false,
"reduce": {
"factor": 4,
"value": true
}
},
"particles": {
"bounce": {
"horizontal": {
"random": {
"enable": false,
"minimumValue": 0.1
},
"value": 1
},
"vertical": {
"random": {
"enable": false,
"minimumValue": 0.1
},
"value": 1
}
},
"collisions": {
"bounce": {
"horizontal": {
"random": {
"enable": false,
"minimumValue": 0.1
},
"value": 1
},
"vertical": {
"random": {
"enable": false,
"minimumValue": 0.1
},
"value": 1
}
},
"enable": false,
"mode": "bounce",
"overlap": {
"enable": true,
"retries": 0
}
},
"color": {
"value": "#fff",
"animation": {
"h": {
"count": 0,
"enable": false,
"offset": 0,
"speed": 20,
"sync": true
},
"s": {
"count": 0,
"enable": false,
"offset": 0,
"speed": 1,
"sync": true
},
"l": {
"count": 0,
"enable": false,
"offset": 0,
"speed": 1,
"sync": true
}
}
},
"destroy": {
"mode": "none",
"split": {
"count": 1,
"factor": {
"random": {
"enable": false,
"minimumValue": 0
},
"value": 3
},
"rate": {
"random": {
"enable": false,
"minimumValue": 0
},
"value": {
"min": 4,
"max": 9
}
},
"sizeOffset": true
}
},
"gradient": [],
"groups": {
"z5000": {
"number": {
"value": 70
},
"zIndex": {
"value": 50
}
},
"z7500": {
"number": {
"value": 30
},
"zIndex": {
"value": 75
}
},
"z2500": {
"number": {
"value": 50
},
"zIndex": {
"value": 25
}
},
"z1000": {
"number": {
"value": 40
},
"zIndex": {
"value": 10
}
}
},
"life": {
"count": 0,
"delay": {
"random": {
"enable": false,
"minimumValue": 0
},
"value": 0,
"sync": false
},
"duration": {
"random": {
"enable": false,
"minimumValue": 0.0001
},
"value": 0,
"sync": false
}
},
"links": {
"blink": false,
"color": {
"value": "#ffffff"
},
"consent": false,
"distance": 100,
"enable": false,
"frequency": 1,
"opacity": 0.4,
"shadow": {
"blur": 5,
"color": {
"value": "#00ff00"
},
"enable": false
},
"triangles": {
"enable": false,
"frequency": 1
},
"width": 1,
"warp": false
},
"move": {
"angle": {
"offset": 0,
"value": 10
},
"attract": {
"distance": 200,
"enable": false,
"rotate": {
"x": 600,
"y": 1200
}
},
"decay": 0,
"distance": {},
"direction": "right",
"drift": 0,
"enable": true,
"gravity": {
"acceleration": 9.81,
"enable": false,
"inverse": false,
"maxSpeed": 50
},
"path": {
"clamp": true,
"delay": {
"random": {
"enable": false,
"minimumValue": 0
},
"value": 0
},
"enable": false,
"options": {}
},
"outModes": {
"default": "out",
"bottom": "out",
"left": "out",
"right": "out",
"top": "out"
},
"random": false,
"size": false,
"speed": 5,
"spin": {
"acceleration": 0,
"enable": false
},
"straight": false,
"trail": {
"enable": false,
"length": 10,
"fillColor": {
"value": "#000000"
}
},
"vibrate": false,
"warp": false
},
"number": {
"density": {
"enable": false,
"area": 800,
"factor": 1000
},
"limit": 0,
"value": 200
},
"opacity": {
"random": {
"enable": false,
"minimumValue": 0.1
},
"value": 1,
"animation": {
"count": 0,
"enable": false,
"speed": 3,
"sync": false,
"destroy": "none",
"startValue": "random",
"minimumValue": 0.1
}
},
"orbit": {
"animation": {
"count": 0,
"enable": false,
"speed": 1,
"sync": false
},
"enable": false,
"opacity": 1,
"rotation": {
"random": {
"enable": false,
"minimumValue": 0
},
"value": 45
},
"width": 1
},
"reduceDuplicates": false,
"repulse": {
"random": {
"enable": false,
"minimumValue": 0
},
"value": 0,
"enabled": false,
"distance": 1,
"duration": 1,
"factor": 1,
"speed": 1
},
"roll": {
"darken": {
"enable": false,
"value": 0
},
"enable": false,
"enlighten": {
"enable": false,
"value": 0
},
"mode": "vertical",
"speed": 25
},
"rotate": {
"random": {
"enable": false,
"minimumValue": 0
},
"value": 0,
"animation": {
"enable": false,
"speed": 0,
"sync": false
},
"direction": "clockwise",
"path": false
},
"shadow": {
"blur": 0,
"color": {
"value": "#000000"
},
"enable": false,
"offset": {
"x": 0,
"y": 0
}
},
"shape": {
"options": {},
"type": "circle"
},
"size": {
"random": {
"enable": false,
"minimumValue": 1
},
"value": 3,
"animation": {
"count": 0,
"enable": false,
"speed": 5,
"sync": false,
"destroy": "none",
"startValue": "random"
}
},
"stroke": {
"width": 0
},
"tilt": {
"random": {
"enable": false,
"minimumValue": 0
},
"value": 0,
"animation": {
"enable": false,
"speed": 0,
"sync": false
},
"direction": "clockwise",
"enable": false
},
"twinkle": {
"lines": {
"enable": false,
"frequency": 0.05,
"opacity": 1
},
"particles": {
"enable": false,
"frequency": 0.05,
"opacity": 1
}
},
"wobble": {
"distance": 5,
"enable": false,
"speed": 50
},
"zIndex": {
"random": {
"enable": false,
"minimumValue": 0
},
"value": 5,
"opacityRate": 0.5,
"sizeRate": 1,
"velocityRate": 1
}
},
"pauseOnBlur": true,
"pauseOnOutsideViewport": true,
"responsive": [],
"style": {},
"themes": [],
"zLayers": 100,
"emitters": {
"autoPlay": true,
"fill": true,
"life": {
"wait": false
},
"rate": {
"quantity": 1,
"delay": 7
},
"shape": "square",
"startCount": 0,
"size": {
"mode": "percent",
"height": 0,
"width": 0
},
"particles": {
"shape": {
"type": "images",
"options": {
"images": {
"src": "https://particles.js.org/images/cyan_amongus.png",
"width": 500,
"height": 634
}
}
},
"size": {
"value": 40
},
"move": {
"speed": 10,
"outModes": {
"default": "none",
"right": "destroy"
},
"straight": true
},
"zIndex": {
"value": 0
},
"rotate": {
"value": {
"min": 0,
"max": 360
},
"animation": {
"enable": true,
"speed": 10,
"sync": true
}
}
},
"position": {
"x": -5,
"y": 55
}
}
}到此這篇關(guān)于vue3中使用 VueParticles實現(xiàn)粒子動態(tài)背景的文章就介紹到這了,更多相關(guān)vue粒子動態(tài)背景內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue 使用高德地圖添加點標(biāo)記 + 點擊地圖獲取坐標(biāo) + 帶搜索(即地
這篇文章主要介紹了Vue 使用高德地圖添加點標(biāo)記 + 點擊地圖獲取坐標(biāo) + 帶搜索(即地理編碼 + 逆地理編碼) 附完整示例,本文結(jié)合示例代碼給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧2024-01-01
這篇文章主要介紹了vue實現(xiàn)標(biāo)簽云效果的方法,結(jié)合實例形式詳細(xì)分析了vue標(biāo)簽云的實現(xiàn)技巧與相關(guān)操作注意事項,需要的朋友可以參考下2019-08-08
下面小編就為大家分享一篇vue2.0 路由不顯示router-view的解決方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
使用Vue3和Echarts?5繪制帶有立體感流線中國地圖(推薦收藏!)
最近接到一個需求是做一個中國地圖,下面這篇文章主要給大家介紹了關(guān)于如何使用Vue3和Echarts?5繪制帶有立體感流線中國地圖的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-04-04
這篇文章主要介紹了利用vue3+ts實現(xiàn)管理后臺(增刪改查),文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10
在Vue應(yīng)用中,表單驗證是非常重要的一部分,Vue提供了一些內(nèi)置的驗證規(guī)則,比如required、min、max等,但是有時候我們需要對表單進(jìn)行自定義驗證,以滿足特定的業(yè)務(wù)需求,本文將介紹如何在Vue中進(jìn)行表單自定義驗證,感興趣的朋友可以參考下2023-12-12
這篇文章主要為大家介紹了vue組件prop驗證作用示例解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
vue點擊右鍵出現(xiàn)自定義操作菜單實現(xiàn)代碼
這篇文章主要給大家介紹了關(guān)于vue點擊右鍵出現(xiàn)自定義操作菜單實現(xiàn)的相關(guān)資料,在網(wǎng)頁中我們也希望可以像桌面軟件一樣,點擊右鍵后出現(xiàn)操作菜單,對選中的數(shù)據(jù)項進(jìn)行相應(yīng)的操作,需要的朋友可以參考下2023-08-08
這篇文章主要介紹了vue中實現(xiàn)動態(tài)生成二維碼的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
vue+Element-ui實現(xiàn)分頁效果實例代碼詳解
這篇文章主要介紹了vue+Element-ui實現(xiàn)分頁效果 ,本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2018-12-12