NPM是一个很受之前一些开发者欢迎的包管理器，可以轻松地通过命令行下载和安装许多常见的工具和库。Hyper-Material-Box-Linking是一个npm包，用于生成具有高级动画效果的材料设计风格的链接框。正如它的名字所暗示的，“hyper”代表超链接，“material”指的是材料设计。
这个npm包的好处在于，不论你是刚刚接触前端开发，还是已经拥有了丰富的经验，都可以通过这个包，以最简单的方式为你的网站增加一些复杂且富有生机的链接框效果。
安装
使用npm安装这个包很容易。你需要在你的终端中使用以下命令：
npm i hyper-material-box-linking --save
在上述命令中，"--save"参数会将这个npm包添加到你的项目的package.json中，以便它可以自动管理和更新。如果你不使用这个参数，你需要手动管理和更新这个包。
使用
使用Hyper-Material-Box-Linking要很容易，首先，在你的HTML文件中引入以下样式表：
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/hyper-material-box-linking/dist/hyper-material-box-linking.min.css">
接下来，在你的HTML代码中添加一个链接框：
<a href="#" class="box">Link Text</a>
这给出的结果是一个简单的超链接，现在让我们把它变换成进阶的材料设计超链接效果。
引入jQuery和Hyper-Material-Box-Linking的脚本：
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/hyper-material-box-linking/dist/hyper-material-box-linking.min.js"></script>
绑定Hyper-Material-Box-Linking效果到链接框（选择器为'.box'）：
$(document).ready(function(){ $('.box').materialBoxLinking(); });
如果你想使任何其他的超链接效果使用Hyper-Material-Box-Linking，你只需要将类"box"更改为你自己的类。
自定义配置
Hyper-material-box-linking提供了各种不同的配置选项，以使你的链接框发光、呼吸或追随光标等等。下面是一些可用选项的示例：
-- -------------------- ---- ------- ------------------------------ ------ ---------- ----------- ---------- --------------- ---- ------------- ---- ----- ----- ----------- --- ------------- ----- ------- ----- ------------- -- -------------- ---- ------- ----- --------------- ----- ------------ ---- ------ ----- -------------- ---- ------- ----- ------------ ---- ---展开代码
你可以调整参数和更改默认值来自定义你的链接框效果。
实际应用
以下是一个实际使用该npm包来实现材料设计链接框的例子，在这个例子中，我们定义了一个用类“'link'”，代码如下：
-- -------------------- ---- ------- --------- ----- ------ ------ ---------------------------------- -------------- ------ ---------------- ------ ---------------------------- ------------------ ------ --------------- ---------------------------- ----------------- ------ ---------------- ------------------------------------------------------------------------------------------------------- ------- ------ --- -------- ------------------ ------ -------- ----------------------------------------------------------- -------- -------------------------------------------------------------------------------------------------------------- --------- ------------------------------ -------------------------------- ------ ---------- ----------- ---------- --------------- ---- ------------- ---- ----- ----- ----------- --- ------------- ----- ------- ----- ------------- -- -------------- ---- ------- ----- --------------- ----- ------------ ---- ------ ----- -------------- ---- ------- ----- ------------ ---- --- ---- ---------- ------- -------展开代码
总结
Hyper-Material-Box-Linking是一个易于使用和自定义的npm包，它可以轻松地为你的网站创建高级材料设计风格的链接框，其中包括复杂的效果和动画。此外，它的使用和配置非常灵活，你可以根据你的需要自定义配置，使你的链接框有一个独特的外观。如果你正在寻找一种快速而简单的方法来为你的网站设计高级链接效果，那么Hyper-Material-Box-Linking是一个不错的选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671cc30d092702382282c
