我认为可以说微交互很酷。我们 – 网络用户 – 普遍都喜欢它们。无论您是否注意到它们，它们都能提供显着的用户体验改进。通过巧妙地以友好的方式使您的网站或网络工具变得生动，它们只是让用户更多地享受整个交互。
本着这种精神，我想给你一个快速的微交互教程，并向你展示如何为你的网站创建一个很酷的“赞”按钮。用最少的代码。这是在行动：
对于竖起大拇指按钮非常令人兴奋，不是吗？我们来吧！
但首先：
为什么首先要打扰微交互？
我不打算在这里过分说服你，但让我们看几件事。
微交互已经存在了一段时间 – 足以让他们甚至有关于它们的完整书籍。此外，还有许多实验和研究正在研究它们实际上是多么有用和有效。
最着名的研究机构之一，尼尔森诺曼集团，在2018年更密切地关注微观互动。根据他们的结论，微互动已经证明，除其他外，通过鼓励参与和沟通品牌来改善用户体验。
简而言之，如果正确使用微观交互可能是非常有益的，而且也不是太多。今天，我们将向您展示一个实际的微交互的简单示例：
微交互教程：我们竖起大拇指按钮的标记和基本CSS
?注意;在底部，我们为您提供了一些不涉及手动编写代码的选项。
首先，我们需要一些好的旧HTML和CSS魔术来使其工作。结构非常简单。
我们将使用SVG标签作为相似的图标本身 – 这是来自Font Awesome;你可以在这里找到大部分图标。只是为了调整SVG标签的宽度和高度属性，我们将使用下面的HTML：
现在对于CSS，我们将真正基本。我们想要在这里发生的是给我们的喜欢按钮一个漂亮的外观，并让一切都很好地集中在屏幕上。我们已经知道我们将在点击（活动类）时切换一个类，所以我们需要考虑到这一点。我们将在活动时用蓝色填充图标，而在不激活时用深灰色填充图标：
body {display：flex; align-items：center;辩解内容：中心;身高：100vh; } .like-button {display：flex; align-items：center;辩解内容：中心; } .like-button.active {-webkit-animation：pop 0.9s both;动画：pop都是0.9s; } .like-button svg {opacity：1; } .like-button svg path {fill：＃333;过渡：填补.4s缓解; } .like-button.active svg path {fill：＃2196f3; }
我们在这里想要的另一件事是当按钮变为活动状态时使用的流行动画，所以我们要将它添加到我们的CSS文件中：
@ -webkit-keyframes pop {0％{-webkit-transform：scale3d（1,1,1）; transform：scale3d（1,1,1）; 30％{-webkit-transform：scale3d（1.25,0.75,1）; transform：scale3d（1.25,0.75,1）; } 40％{-webkit-transform：scale3d（0.75,1.25,1）; transform：scale3d（0.75,1.25,1）; 50％{-webkit-transform：scale3d（1.15,0.85,1）; transform：scale3d（1.15,0.85,1）; } 65％{-webkit-transform：scale3d（0.95,1.05,1）; transform：scale3d（0.95,1.05,1）; 75％{-webkit-transform：scale3d（1.05,0.95,1）; transform：scale3d（1.05,0.95,1）; } 100％{-webkit-transform：scale3d（1,1,1）; transform：scale3d（1,1,1）; @keyframes pop {0％{-webkit-transform：scale3d（1,1,1）; transform：scale3d（1,1,1）; 30％{-webkit-transform：scale3d（1.25,0.75,1）; transform：scale3d（1.25,0.75,1）; } 40％{-webkit-transform：scale3d（0.75,1.25,1）; transform：scale3d（0.75,1.25,1）; 50％{-webkit-transform：scale3d（1.15,0.85,1）; transform：scale3d（1.15,0.85,1）; } 65％{-webkit-transform：scale3d（0.95,1.05,1）; transform：scale3d（0.95,1.05,1）; 75％{-webkit-transform：scale3d（1.05,0.95,1）; transform：scale3d（1.05,0.95,1）; } 100％{-webkit-transform：scale3d（1,1,1）; transform：scale3d（1,1,1）;这个微交互教程的“交互”部分
现在我们已经完成了基本的样式，现在是处理实际交互的时候了 – 这意味着JavaScript！
首先，我们需要一个JavaScript函数，它在给定的间隔（最小值和最大值）之间生成一个随机整数：
function randomInt（min，max）{return Math.floor（Math.random（）*（max – min + 1）+ min）; }
接下来，我们将需要另一个随机返回+1或-1的函数，这样我们就可以得到随机的负值或正值：
function plusOrMinus（）{return Math.random（）<0.5？ -1：1; }
现在进行实际的交互处理;让我们看看代码来正确解释它：
- 首先，我们将在变量中保存按钮并向其添加单击事件侦听器。
- 单击该按钮时，我们将添加一个preventDefault（）函数，以便我们确保不会发生任何不需要的操作。
- 之后，我们将把我们的活动类添加到按钮，我们之前使用CSS通过蓝色设置了样式。
- 然后我们将运行generateClones（）函数（尚未定义），通过它将我们的按钮作为参数传递。
let button = document.querySelector（“。like-button”）; button.addEventListener（“click”，function（e）{e.preventDefault（）; this.classList.toggle（“active”）; generateClones（this）;}）;
现在让我们定义generateClones（）函数并使用它运行以下步骤：
- 首先，让我们决定随机数量的克隆。我们将为图标实例化两到四个克隆。我们将使用先前定义的randomInt（）函数。
- 然后，对于每个克隆，我们将使用按钮内的SVG标记作为“模型”，并使用cloneNode（true）JavaScript函数将其克隆为新变量。我们还将使用随机整数生成器函数为我们的克隆定义5到16之间的大小。
- 接下来，我们将把克隆添加到按钮，使用先前生成的数字设置它们的宽度和高度，并使它们的位置绝对，以便我们可以独立于按钮移动它们。
- 我们需要的另一件事是克隆的转换，所以它们不会在点击时弹出新的位置。
- 现在，为了添加将移动我们图标的实际转换，我们将会有点疯狂。我们希望我们的克隆从我们的按钮中心随机向外移动。使用我们的randomInt（）和plusOrMinus（）函数的组合，我们将使用translate3d CSS属性在XY轴上移动我们的克隆。我们也将使用“黑客”，因为我们的过渡不会适用。因此，添加一个简单的setTimeout（）函数将帮助我们实现这一目标。与此同时，我们将不透明度移至0，使克隆消失。
- 删除我们的克隆。在我们完成所有爵士乐之后，我们必须清理DOM。所以我们需要另一个setTimeout（）函数，它将在一秒钟后从DOM中删除我们的克隆。
generateClones（button）{// 1.生成克隆并遍历set number let clones = randomInt（2,4）; for（let it = 1; it <= clones; it ++）{// 2.在变量中获取SVG标记克隆并生成随机大小let clone = button.querySelector（“svg”）。cloneNode（true），size = randomInt（5,16）; // 3.将我们的克隆添加到按钮并更改其'width / height / position button.appendChild（clone）; clone.setAttribute（“width”，size）; clone.setAttribute（“height”，size）; clone.style.position =“绝对”; // 4.添加一些浮华过渡clone.style.transition =“变换0.5s cubic-bezier（0.12,0.74,0.58,0.99）0.3s，不透明度1s缓出.5s”; // 5.使用setTimeout函数向外设置我们的图标，以便CSS符合要求。让animTimeout = setTimeout（function（）{clone.style.transform =“translate3d（”+ plusOrMinus（）* randomInt（10,25）+“px，”+ plusOrMinus（）* randomInt（10,25）+“px， 0）“; clone.style.opacity = 0; clearTimeout（animTimeout）;}，1）; // 6.在0.9秒后删除克隆让removeNodeTimeout = setTimeout（function（）{clone.parentNode.removeChild（clone）; clearTimeout（removeNodeTimeout）;}，900）; }}
而已！我们已经完成了它！在下面你会找到CodePen示例：
见笔
像按钮由AndreiBăicuş（@abaicus）
在CodePen上。
谢谢你通过这个！
向WordPress添加微交互的其他选项
如果手动编写代码并不完全是你的事情，实际上有很多WordPress插件可以用来在你的网站上进行微交互，而不用担心它是如何工作的。
首先，您可以使用Animate It！插件使用CSS3为您页面上的任何元素设置动画。
例如，您可以添加按钮或一段文本，然后在单击时以特定方式将其设置为动画。
这是一个插件可以做什么的例子 – 视频?。
另一个插件，也是我们编辑的最爱之一，是Shortcodes Ultimate。
在众多不同的短代码中，有一个用于简单的动画。有一些关于动画应该如何表现的预设，你可以在块中放置任何可以动画的东西。
这是一个动画按钮的示例（注意;动画仅在第一次滚动到视口时才起作用;如果您没有看到它，请刷新页面）：
点击我
这两个插件应该为您提供足够的选项来为页面上的某些元素设置动画，并在用户与它们交互时使它们更加流行。当然，您不希望过度使用这些内容，但是当用户与您的键操作进行交互时给予用户额外的推动可能会有很大帮助。
您如何看待微交互，您是否正在考虑将这种微交互教程充分利用并向您的网站添加内容？让我们在评论中知道。
…
不要忘记加入我们的速成课程，以加快您的WordPress网站。通过一些简单的修复，您可以将加载时间减少50-80％：