什么是 vibrato
vibrato 是一个可以为页面添加抖动效果的 JavaScript 库。它可以很方便地集成到任何 Web 应用程序或网站中，为用户带来更加动感的用户体验。
安装
你可以通过 npm 安装 vibrato：
npm install vibrato --save
然后在你的代码中引入它：
import Vibrato from 'vibrato'; const vibrato = new Vibrato();
使用
使用 vibrato 可以非常简单地为页面添加抖动效果。
基本用法
在你的 HTML 中添加一个元素：
<div class="my-element"> 这是要添加抖动效果的元素 </div>
然后在你的 JavaScript 中创建一个 Vibrato 实例，并调用 shake 方法，传入你要抖动的元素的选择器：
const vibrato = new Vibrato();
vibrato.shake('.my-element');现在，当你运行这段代码时，页面中标有 my-element 类的元素将会开始抖动。
自定义选项
可以通过设置选项的方式自定义抖动效果的行为。
const vibrato = new Vibrato({
speed: 20, // 抖动速度，单位毫秒，默认值为 25
amplitude: 10, // 抖动幅度，单位像素，默认值为 5
frequency: 3 // 抖动频率，默认值为 3
});
vibrato.shake('.my-element'); // 传入元素的选择器示例代码
下面是一个完整的示例代码，它会让页面中带有 my-element 类的元素抖动：
-- -------------------- ---- -------
--------- -----
------
------
-------------- ----------
-------
------
---- -------------------
------------
------
------- -----------------------------------------
--------
----- ------- - --- ----------
-----------------------------
---------
-------
-------总结
通过学习本文，你了解了如何使用 npm 包 vibrato 为页面添加抖动效果。同时，你还学会了如何通过设置选项来自定义抖动效果的行为。希望本文能对你有所帮助，让你能够为你的 Web 应用程序或网站带来更加动感的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562e281e8991b448e069c