简介
blurrd 是一个用于在元素背景上添加模糊效果的 JavaScript 工具包。它可以很容易地使您的界面看起来更加柔和和现代，可以用于各种项目中的背景、卡片、模态框等等。
安装
你可以通过 npm 来安装 blurrd:
npm install blurrd
或者通过 yarn 安装：
yarn add blurrd
使用
blurrd 提供了一个名为 blurrd 的全局方法，需要传入两个参数：
- 第一个参数是要添加模糊效果的元素。
- 第二个参数是一个对象，包含 blurAmount 和 rootMargin 两个参数。
下面是一个简单的例子：
import blurrd from 'blurrd';
const element = document.querySelector('#element');
blurrd(element, {
blurAmount: 10,
rootMargin: '0px',
});正如你所看到的，使用 blurrd 非常简单，只需要传入两个参数即可。其中 blurAmount 是以像素为单位的模糊量，rootMargin 是要添加为该元素申明的根元素的 margin。
示例
下面我们看一个更加详细的例子，展示了如何使用 blurrd 来创建一个模糊的背景。
<!-- HTML Code --> <div class="bg" id="bg"></div> <div class="content"> <h1>Blurrd Demo</h1> <p>This is an example of using blurrd.</p> <button>Get Started</button> </div>
-- -------------------- ---- ------- -- --- ---- -- ---- - ------- -- -------- -- -------- ----- ---------------- ------- ------------ ------- ------- ------ ------ ----- ----------------- -------- - --- - --------- ------ ---- -- ----- -- ------- ------ ------ ----- ----------------- ----------------------------------------- ---------------- ------ ------------------ ---------- ------- ----------- - -------- - ----------- ------- -
-- -------------------- ---- ------- -- -- ---- ------ ------ ---- --------- ----- ------- - ------------------------------ --------------- - ----------- --- ----------- ------ ---
上面的代码会创建一个背景模糊的效果，blurAmount 为 10，但你根据自己的需要进行调整，rootMargin 为 0px。
总结
使用 blurrd 可以更加方便地为你的网页添加模糊效果。它非常简单易用，只需要传入两个参数即可。我们通过一个 demo 来说明如何将其应用到实际项目中，相信大家都已经理解了如何使用它。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/71118