金华做网站：如何快速添加微交互到您的网站

2019.08.02 mf_web

金华做网站在今天的快速提示中，我将向您展示如何使用名为micron.js的JavaScript库向您的网站添加微交互。使用micron.js，您可以为网页元素添加微妙的动画，而无需自己编写样式 - 所有操作都是使用标记中的数据属性完成的。让我们来看看！

1. 获得micron.js

访问 micron.js 主页，您将找到一些演示链接以及回购链接。要开始使用，您需要CSS文件和JavaScript文件，CDN链接如下所示：

1 2	<link href="https://unpkg.com/webkul-micron@1.1.4/dist/css/micron.min.css" type="text/css" rel="stylesheet"> <script src="https://unpkg.com/webkul-micron@1.1.4/dist/script/micron.min.js" type="text/javascript"></script>

您可以在看到它们时将这些内容添加到页面中，或者如果您使用的是CodePen笔，请将链接添加到笔设置中的CSS和JavaScript选项卡。

我们以锚元素为例。请考虑以下事项：

1	<a href="#" class="demo-button">Default</a>

单击这样的锚将绝对不会做任何事情。但是，通过添加名称的数据属性data-micron，我们可以为我们的锚添加一些天赋。

1	<a href="#" class="demo-button" data-micron="shake">Default</a>

在这里，您将看到我们已将值添加shake到属性中。这可能是众多价值观之一，所有这些都给了我们不同的互动：

现在，当您单击锚点时，您将以微交互的形式看到一些视觉反馈。

添加另一个数据属性将允许我们改变动画的持续时间：

1	data-micron-duration="1"

给定的值以秒为单位，因此上面的属性会将默认动画减慢到持续一秒。

你现在已经掌握了这个，对吧？让我们添加另一个属性来调整动画的缓动功能。

1	data-micron-timing="linear"

同样，这里支持许多熟悉的值：

我们可以使用micron.js来定位除被点击之外的元素，这次使用两个数据属性：

1	data-micron-bind="true" data-micron-id="target"

在这种情况下，我们说绑定是true，并且我们希望动画对id为的元素生效target。

查看下面的演示，了解所有这些示例的集合，包括绑定（单击绑定按钮并查看红色div动画）：

Micron.js为微交互做的比我们在本教程中演示的更多，访问网站，玩游戏，亲眼看看！

金华做网站