node-waves 是一个非常实用的前端库，可以为按钮、输入框等元素添加水波纹效果，提升用户交互体验。本文将详细介绍如何使用这个 npm 包。
安装
首先需要在电脑上安装 Node.js 和 npm。然后在项目目录下打开终端，执行以下命令进行安装：
npm install --save node-waves
引入
在 HTML 中引入 waves.min.css 和 waves.min.js：
<link rel="stylesheet" href="./node_modules/node-waves/dist/waves.min.css"> <script src="./node_modules/node-waves/dist/waves.min.js"></script>
使用
初始化
在 JavaScript 中初始化 node-waves：
Waves.init();
此外，还可以通过传递参数来定制化配置。例如：
Waves.init({
duration: 1000, // 水波纹动画持续时间（毫秒）
delay: 200 // 水波纹出现延迟（毫秒）
});添加水波纹效果
只需添加 CSS 类名 waves-effect 和 waves-light 即可给元素添加水波纹效果。例如：
<button class="waves-effect waves-light">点击我</button>
自定义颜色
可以使用 CSS 变量或者 data-waves-color 属性来自定义水波纹的颜色。例如：
<button class="waves-effect waves-light" style="--waves-color: #ff0000">点击我</button> <button class="waves-effect waves-light" data-waves-color="#00ff00">点击我</button>
示例代码
完整的示例代码如下：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
----------------- ------------
----- ---------------- ----------------------------------------------------
-------
------
------- ------------------- ------------ --------------------- ---------------------
------- -----------------------------------------------------------
--------
-------------
---------
-------
-------总结
通过本文的介绍，我们学习了如何安装、引入和使用 npm 包 node-waves。该库可以帮助我们为网页中的元素添加水波纹效果，提升用户交互体验。同时，我们还学会了如何定制化配置和自定义颜色等高级用法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/33885