react-tsparticles 生成动态特效背景-五彩花瓣

1.代码

import React from "react";
import Particles from "react-tsparticles";
import { loadPreset } from "tsparticles-preset-sea-anemone";
import "./styles.css";

export default function App() {
  const customInit = (tsParticles) => {
    loadPreset(tsParticles);
  };

  const options = {
    preset: "seaAnemone",
    backgroundMode: {
      enable: true,
      zIndex: -1
    }
  };

  return <Particles options={options} init={customInit} />;
}

依赖

{
  "name": "react-tsparticles-sea-anemone-preset",
  "version": "1.0.0",
  "description": "React tsParticles Sea Anemone Preset Sample",
  "keywords": [],
  "main": "src/index.js",
  "dependencies": {
    "react": "latest",
    "react-dom": "latest",
    "react-scripts": "latest",
    "react-tsparticles": "1.19.0-alpha.1",
    "tsparticles-preset-sea-anemone": "1.4.0-alpha.1"
  },
  "devDependencies": {
    "typescript": "4.0.5"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]