react中实现粒子动画背景----particles-bg

15号考完试放寒假了,芜湖非常开心终于可以拥抱新生活了!快乐。
学长已经去实习了,本来还想再懒懒,刚放假嘛想着玩儿几天吧,但是又觉着之前一段时间因为期末复习也没怎么学习新东西就一鼓作气吧,,对对对最重要的是俺期末成绩都出来了,没挂科,而且都是考的还不错的芜湖~~~~~~

以上均是我没有用的生活总结。下面进入正题吧。
哈哈哈哈哈哈哈哈哈哈

——————————————一如既往的分割线

我最近是在用react写项目,到目前为止是所有的静态页面已经搭建完成然后基本的样式也写的差不多了,这是一个小项目所以总共也没几个页面。 虽然是所有的页面样式都写完了但是起初在我的构思里在我的login和register页面中,我是想搞一个背景动画的,在我查找好看的动画素材的时候,发现了一个很好用的粒子背景库----particles-bg
链接:https://github.com/lindelof/particles-bg

非常酷炫,而且它的技术栈也刚刚好是react。于是我立马把它用在了我的项目中,于是我的项目立马看起来高大上了许多芜湖~

用法如下:
1.首先是安装:

npm install --save particles-bg

  1. 引入
    在这里插入图片描述
    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等等。

效果蛮不错的,

猜你喜欢

转载自blog.csdn.net/qq_45830543/article/details/112892398
今日推荐