我觉得可以说微交互是凉爽的。我们——网络用户——通常都喜欢它们。无论您是否注意到它们，它们都会显着改善用户体验。通过以友好的方式巧妙地使您的网站或网络工具栩栩如生，它们只会让用户更加享受整个交互。
本着这种精神，我想为您提供一个快速的微交互教程，并向您展示如何为您的网站创建一个很酷的“赞”按钮。用最少的代码。这是在行动：
竖起大拇指按钮非常令人兴奋，不是吗？让我们来！
但首先：
为什么首先要考虑微交互？
我不想在这里说服你，但让我们看一些事情。
微交互已经存在了一段时间 - 足以让他们甚至拥有整本书。此外，还有许多实验和研究正在进行，以了解它们的实际用途和有效性。
Nielsen Norman Group 是最著名的研究机构之一，在 2018 年更仔细地研究了微观交互。根据他们的结论，微交互已被证明可以通过以下方式改善用户体验，鼓励与品牌的互动和交流。
简而言之，如果使用得当，微交互会非常有益，但不要太多。今天，我们将向您展示一个微交互的简单示例：
微交互教程：我们的“竖起大拇指”按钮的标记和基本 CSS
?笔记;在底部，我们为您提供了一些不涉及手动编码的选项。
首先，我们需要一些古老的 HTML 和 CSS 魔法来让它工作。结构非常简单。
我们将为相似的图标本身使用 SVG 标签——这来自 Font Awesome；你可以在这里找到大部分图标。只是为了调整 SVG 标签的宽度和高度属性，我们将使用以下 HTML：
“使用严格”；函数 wprRemoveCPSS(){var preload_stylesheets=document.querySelectorAll(' link[ data-rocket-async="style"][rel="preload"]');if(preload_stylesheets&&0
现在对于 CSS，我们将变得非常基础。我们想要在这里发生的是给我们的 like 按钮一个漂亮的外观和让一切都很好地居中在屏幕上。我们已经知道我们将在单击时切换一个类（活动类），因此我们需要考虑到这一点。我们将在活动时用蓝色填充图标，在不活动时用深灰色填充图标：
body { display: flex;对齐 gn-items: center;对齐内容：居中；高度：100vh； } .like-button { 显示：flex；对齐项目：居中；对齐内容：居中； } .like-button.active {-webkit-animation: pop 0.9s both;动画：弹出两个 0.9s； } .like-button svg { 不透明度：1； } .like-button svg path { 填充：#333；过渡：fill.4s ease； } .like-button.active svg path {fill: #2196f3;}
我们在这里想要的另一件事是当按钮激活时使用的弹出动画，所以我们将把它添加到我们的CSS 文件中间：
@-webkit-keyframes pop { 0% { -webkit-transform: scale3d(1,1,1);变换：scale3d（1,1,1）； 30% { -webkit- 变换：scale3d(1.25, 0.75, 1);变换：scale3d(1.25, 0.75, 1); } 40% {-webkit-transform: scale3d(0.75, 1.25, 1);变换：scale3d(0.75, 1.25, 1) ； 50% { -webkit-transform: scale3d(1.15, 0.85, 1);变换：scale3d(1.15, 0.85, 1); } 65% { -webkit-transform: scale3d(0.95, 1.05, 1);变换：scale3d（0.95,1.05,1）； 75% { -webkit-transform:scale3d(1.05,0.95,1);变换：scale3d（1.05,0.95,1）； } 100%{ -webkit-transform:scale3d(1,1 ,1);变换：scale3d（1,1,1）； @keyframes pop { 0% { - webkit-transform: scale3d(1,1,1);变换：scale3d（1,1,1）； 30% { -webkit-transform:scale3d (1.25, 0.75, 1);变换：scale3d(1.25, 0.75, 1); } 40% {-webkit-transform: scale3d(0.75, 1.25, 1);变换：scale3d(0.75, 1.25, 1); 50% {-webkit-transform: scale3d(1.15, 0.85, 1);变换：scale3d(1.15, 0.85, 1); } 65% {-webkit-transform: scale3d(0.95, 1.05, 1);变换：scale3d(0.95, 1.05,1); 75% { -webkit-transform:scale3d(1.05,0.95,1);变换：scale3d（1.05,0.95,1）； } 100%{-webkit-transform:scale3d(1,1,1) ;变换：scale3d（1,1,1）；本微交互教程的“交互”部分
现在我们已经完成了基本的样式设置，是时候处理实际的交互了——这意味着 JavaScript！
首先，我们需要一个 JavaScript 函数来生成给定区间（最小值和最大值）之间的随机整数：
function randomInt(min, max) { return Math.floor(Math .random()*(最大值 - 最小值 + 1) + 最小值); }
接下来，我们需要另一个随机返回 +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 轴上移动我们的克隆。我们还将使用“hack”，因为我们的转换不适用。所以添加一个简单的 setTimeout() 函数将帮助我们实现这一点。同时，我们将不透明度移至 0，使克隆消失。
- 删除我们的克隆。完成所有爵士乐后，我们必须清理 DOM。所以我们需要另一个 setTimeout() 函数，它会在一秒钟后从 DOM 中删除我们的克隆。
generateClones(button){// 1. 生成克隆并遍历集合数 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. 将我们的克隆添加到按钮并更改其宽度/高度/位置 button.appendChild(clone); clone.setAttribute("宽度", 大小); clone.setAttribute("高度", 大小); clone.style.position = "绝对"; // 4. 添加一些华丽的过渡 clone.style.transition = "Transform 0.5s cubic-bezier(0.12, 0.74, 0.58 ,0.99) 0.3s, opacity 1s ease out .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 秒后删除克隆 let removeNodeTimeout = setTimeout(function() { clone.parentNode.removeChild(clone); clearTimeout(removeNodeTimeout); }, 900); }}
就是这样！我们做到了！下面是 CodePen 示例：
请参阅 CodePen 上的 Pen
Like Button by Andrei Băicuş (@abaicus)
。
感谢您的转发！
向 WordPress 添加微交互的其他选项
如果您不喜欢手动编码，实际上有很多 WordPress 插件可用于向您的站点添加微交互，而无需进行交互担心它是如何工作的。
首先，您可以使用 Animate It！该插件使用 CSS3 为页面上的任何元素设置动画。
例如，您可以添加一个按钮或一段文字，然后在单击时以特定方式对其进行动画处理。
这是一个插件可以做什么的例子——视频？。
另一个插件，也是我们编辑的最爱之一，是 Shortcodes Ultimate。
在许多不同的短代码中，有一个用于简单的动画。有一些关于动画应该如何表现的预设，你可以把任何可以动画的东西放在块中。
这是一个动画按钮的示例（注意；动画仅在您第一次滚动到视口时起作用；如果您没有看到它，请刷新页面）：
Click Me
这两个插件应该为您提供足够的选项来为页面上的某些元素设置动画，并使它们在用户与它们交互时弹出更多。当然，您不想过度使用这些，但是在用户与您的击键交互时给他们一个额外的推动可能会有很大的帮助。
您如何看待微交互，您是否考虑充分利用本微交互教程并将内容添加到您的网站？让我们在评论中知道。
...
不要忘记加入我们的速成班，以加速您的 WordPress 网站。通过一些简单的修复，您可以将加载时间减少 50-80%：
