react-blurry-gradient

react-blurry-gradient

实现动态毛玻璃渐变背景特效的 React 组件。

使用方法

npm install react-blurry-gradient

import { BlurryGradient, COLORS } from 'react-blurry-gradient';
import 'react-blurry-gradient/style.css';

export default function App() {
  return (
    <div style={{ width: '100vw', height: '100vh' }}>
      <BlurryGradient colors={COLORS.BLUE} />
    </div>
  );
}

其中 COLORS 是一套预设好的渐变颜色组，可以直接使用。你也可以随意自定义颜色。

注意，BlurryGradient 组件的父元素需要有一个明确的高度，不然可能无法正常显示。

组件参数

BlurryGradient 组件接受以下参数：

1. 基本配置

参数	类型	必填	默认值	说明
colors	string[]	否		背景色配置，会随机从中选取对应的颜色
items	BlurryGradientItemProps[]	否		精确控制每个色块的配置，当该属性有值时，colors 参数将被忽略
blur	string	否	100px	模糊程度，为 0 则完全不模糊
itemNumber	number	否	10	渐变色块的数量

2. 随机范围配置

无论使用 colors 还是 items 配置，都可以使用以下参数来随机生成那些没有指定的属性。

参数	类型	必填	默认值	说明
itemWidth	[number, number]	否	[60, 80]	随机生成的色块宽度上下限
itemWidthUnit	string	否	%	色块宽度单位，配合 itemWidth 使用
itemHeight	[number, number]	否	[60, 80]	随机生成的色块高度上下限
itemHeightUnit	string	否	%	色块高度单位，配合 itemHeight 使用
itemTop	[number, number]	否	[20, 60]	随机生成的色块上边距上下限
itemLeft	string	否	[20, 60]	随机生成的色块左边距上下限
itemSpeed	[number, number]	否	[50，80]	随机生成的色块移动速度上下限，单位秒

License

本项目使用 The MIT License (MIT) 许可开源。