返回首页
最新
听说过这个吗？你用过吗？
我开发了 React Progressive Blur，这是一个小型的 React 组件，可以为现代用户界面叠加效果创建平滑的多层渐进模糊效果。
<p>该组件不是应用单一的重度模糊，而是叠加多个模糊层，模糊强度逐渐增强，并使用渐变遮罩。这产生了更自然的模糊过渡，非常适合视频控制、图像叠加、标题和沉浸式用户界面布局。</p>
<p>它的功能：</p>
* 从任意边缘（顶部、底部、左侧、右侧）创建渐进模糊
* 使用分层的 backdrop-filter 和 CSS 遮罩实现平滑过渡
* 完全可定制的模糊强度
* 与 Tailwind 和现代 React 应用兼容良好
* 轻量且无依赖
<p>* 示例用例：*</p>
* 视频播放器叠加
* 滚动渐变效果
* 玻璃态用户界面
* 英雄部分和媒体预览
<p>示例用法：</p>
```tsx
import BlurEffect from "react-progressive-blur";
<BlurEffect position="top" intensity={80} />
```
<p>在内部，它渲染了三层具有不同强度和遮罩渐变的模糊层，以模拟渐进模糊，而不是生硬的边缘。</p>
<p>非常希望能得到社区的反馈，特别是在性能、API 设计或在现代 CSS 中实现此效果的替代方法方面。</p>
<p>代码库：
[https://github.com/rakib86/react-progressive-blur](https://github.com/rakib86/react-progressive-blur)</p>
<p>npm：
[https://www.npmjs.com/package/react-progressive-blur](https://www.npmjs.com/package/react-progressive-blur)</p>