pleeease-filters 是一个方便的 PostCSS 插件，用于在 CSS 中使用一些不支持的 CSS 过滤器效果。本文将介绍如何使用 pleeease-filters 实现各种过滤器效果，并提供示例代码。
安装
npm install pleeease-filters --save-dev
用法
基础用法
-- -------------------- ---- ------- ----- ------- - ------------------- ----- --------------- - ---------------------------- ----- --- - - ----------- - --------------- ---------- ------- ---------- - -- ---------------------------- ------------- -------------- -- - ------------------------ ---展开代码
上述代码中，首先引入 postcss 和 pleeease-filters，然后定义要转换的 CSS 代码。接下来，我们通过 postcss 处理 CSS 并应用 pleeease-filters 插件。最后，我们打印处理后的 CSS。
效果列表
以下是 pleeease-filters 支持的效果：
blurbrightnesscontrastdrop-shadowgrayscalehue-rotateinvertopacitysaturatesepia
示例代码
模糊滤镜
.my-element { -webkit-filter: blur(5px); filter: blur(5px); }
饱和度滤镜
.my-element { -webkit-filter: saturate(2); filter: saturate(2); }
对比度滤镜
.my-element { -webkit-filter: contrast(200%); filter: contrast(200%); }
混合效果
通过组合多个效果，可以实现更复杂的效果。
饱和度 + 反转
.my-element { -webkit-filter: saturate(2) invert(1); filter: saturate(2) invert(1); }
灰度 + 模糊
.my-element { -webkit-filter: grayscale(100%) blur(5px); filter: grayscale(100%) blur(5px); }
总结
使用 pleeease-filters 插件，我们可以在 CSS 中方便地实现一些不支持的过滤器效果。本文介绍了 pleeease-filters 的安装和基础用法，并提供了各种过滤器效果的示例代码。通过组合这些效果，我们可以实现更复杂的效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/46594
