概述
CSSGram 是一个基于 CSS 的图像滤镜库，通过简单的 HTML 元素和 CSS 类，可以将 Instagram 等应用中常见的滤镜效果应用到网页图片上。本篇文章将介绍如何使用 npm 包 cssgram 在前端项目中使用 Instagram 滤镜。
安装
在终端中输入以下命令进行安装：
--- ------- -------
引入
在需要使用滤镜的文件中引入 cssgram：
----- ---------------- ----------------------------------------------
使用
基础用法
在需要添加滤镜的元素上，添加对应的 CSS 类即可：
---- ----------------- -------------------------
例如，添加黑白滤镜：
---- ----------------- -----------------------
目前该库提供了 19 种不同的滤镜效果，具体效果可以查看官方文档。
自定义样式
除了使用预设的滤镜样式外，还可以根据需要自定义样式，例如修改透明度和对比度：
-------------- - ------- --------------- ------------ --------------- -
---- ----------------- ----------------------
JavaScript 控制
通过 JavaScript 可以动态控制滤镜效果，例如在鼠标悬停时添加一个模糊效果：
------------ - ------- ---------- -
---- ----------------- --------------------
----- --- - ------------------------------ ---------------------------------- -- -- - --------------------------------- --- ---------------------------------- -- -- - ------------------------------------ ---
结语
通过 npm 包 cssgram 可以轻松地在前端项目中使用 Instagram 等应用中常见的滤镜效果，提升网页的视觉效果。同时，在自定义样式和 JavaScript 控制的基础上，可以实现更多复杂的效果。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/33018