我認為可以說微交互很酷。我們 – 網路用戶 – 普遍都喜歡它們。無論您是否注意到它們，它們都能提供顯著的用戶體驗改進。通過巧妙地以友好的方式使您的網站或網路工具變得生動，它們只是讓用戶更多地享受整個交互。
本著這種精神，我想給你一個快速的微交互教程，並向你展示如何為你的網站創建一個很酷的「贊」按鈕。用最少的代碼。這是在行動：
對於豎起大拇指按鈕非常令人興奮，不是嗎？我們來吧！
但首先：
為什麼首先要打擾微交互？
我不打算在這裡過分說服你，但讓我們看幾件事。
微交互已經存在了一段時間 – 足以讓他們甚至有關於它們的完整書籍。此外，還有許多實驗和研究正在研究它們實際上是多麼有用和有效。
最著名的研究機構之一，尼爾森諾曼集團，在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％：