react中實現粒子動畫背景----particles-bg
阿新 • • 發佈:2021-01-22
15號考完試放寒假了,蕪湖非常開心終於可以擁抱新生活了!快樂。
學長已經去實習了,本來還想再懶懶,剛放假嘛想著玩兒幾天吧,但是又覺著之前一段時間因為期末複習也沒怎麼學習新東西就一鼓作氣吧,,對對對最重要的是俺期末成績都出來了,沒掛科,而且都是考的還不錯的蕪湖~~~~~~
以上均是我沒有用的生活總結。下面進入正題吧。
哈哈哈哈哈哈哈哈哈哈。
——————————————一如既往的分割線
我最近是在用react寫專案,到目前為止是所有的靜態頁面已經搭建完成然後基本的樣式也寫的差不多了,這是一個小專案所以總共也沒幾個頁面。 雖然是所有的頁面樣式都寫完了但是起初在我的構思裡在我的login和register頁面中,我是想搞一個背景動畫的,在我查詢好看的動畫素材的時候,發現了一個很好用的粒子背景庫----particles-bg
連結:https://github.com/lindelof/particles-bg
非常酷炫,而且它的技術棧也剛剛好是react。於是我立馬把它用在了我的專案中,於是我的專案立馬看起來高大上了許多蕪湖~
用法如下:
1.首先是安裝:
npm install --save particles-bg
- 引入
3.使用
import React, { Component } from 'react'
import ParticlesBg from 'particles-bg'
class Example extends Component {
render () {
return (
<>
<div>...</div>
<ParticlesBg type="circle" bg={true} />
</>
)
}
}
這裡的type的屬性值可以手動更改,可以是random,circle,lines等等。
效果蠻不錯的,