React-blurry-gradient NPM

react-blurry-gradient

NPM Version npm bundle size NPM License GitHub Actions Workflow Status

实现动态毛玻璃渐变背景特效的 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) 许可开源。

react gradient css blurry gradient

1.0.1

8 months ago

1.0.0

8 months ago