React中实现粒子动画背景

起因

最近在github上想找一个好看又大气的简历模版，无意中发了这个库。https://github.com/nordicgiant2/react-nice-resume

在线DEMO在这里 https://nordicgiant2.github.io/react-nice-resume-page/index.html。看起来非常酷而且技术栈刚好是React，简直再适合不过了。我准备就用这个来做个人主页网站啦👩‍❤️‍👩。

粒子背景

顺着作者的readme看下去，原来项目使用了一个很牛的粒子背景库 particles-bg https://github.com/lindelof/particles-bg

用法(直接看readme)

Install

npm install --save particles-bg

Usage

import React, { Component } from 'react'

import ParticlesBg from 'particles-bg'

class Example extends Component {
  render () {
    return (
      <>
        <div>...</div>
        <ParticlesBg type="circle" bg={true} />
      </>
    )
  }
}

type这里好像可以传不少参数，有啥lines circle ...可能就是圆圈和竖线的粒子动画吧。看英文貌似还可以自定义。

作者还说有个vue版本的 https://github.com/lindelof/particles-bg-vue

这个感觉应该是拿canvas做的吧，应该非常适合简历或者个人主页还有blog底层。😄算是个小玩具了，react的世界看来好玩的东东不少呢！

拿来做了几个练习，都挺酷的。准备先收藏研究下了。 😄