react项目中使用react-particles-js实现粒子动态背景

心语:我以爱之名,判你无期徒刑,在我心里执行。

由于最近写了一个基于react+antd design react的一个后台管理系统,刚好要实现登录页面,但是无奈感觉页面设置背景色太单一,所以找到了 一个第三方库react-particle.js,本人还是觉得比较强大的.所以有需要的小伙伴们可以尝试使用,挺简单的。

要在react中使用,首先得先下载。

npm i react-particle --save

在页面Login.js使用

import React from 'react'
import {
    Form, Input, Button } from 'antd';
import {
    UserOutlined, LockOutlined } from '@ant-design/icons';
import Particles from 'reactparticles.js';
import "./login.css"

export default function Login() {
   
    const onFinish = (values) => {
   
        console.log(values);  //此时的value用来收集账号和密码
    };

    return (
        <div style={
   {
    background: "#708090", height: "100%", overflow: "hidden" }}>
            <Particles id="login-particles" params={
   params}/>
            <div className="login-container">
                <div className="login-title">后台管理系统</div>
                <Form
                    name="normal_login"
                    onFinish={
   onFinish}
                >
                    <Form.Item
                        name="username"
                        rules={
   [{
    required: true, message: 'Please input 
  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 5
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值