10 個用於懸停和點擊效果的自定義 CSS 和 JavaScript 片段

已發表: 2021-03-05

開發人員可以通過簡單的用戶操作（如懸停和鼠標點擊）來製作一些瘋狂的效果。這些主要與桌面用戶有關，但移動網絡也支持大多數瀏覽器中的點擊/觸摸效果。

如果您正在尋找一些很酷的想法來複製到您自己的項目中，那麼這個系列肯定會為您提供一些東西。任何了解一點 JavaScript 和 CSS 的人都可以輕鬆地調整這些效果以在任何瀏覽器、任何網站上工作，並美化佈局體驗。

按鈕懸停效果

動畫效果的明顯起點是 CSS 按鈕。這些在日常使用中是最實用的，因為它們處理了大量的交互性。 CTA 按鈕實際上是在乞求關注，通過這些懸停效果，您可以更快地吸引註意力。

每個效果都使用純 CSS 來製作動畫。其中一些按鈕依賴於 JavaScript 來處理鼠標懸停事件，但所有動畫仍然在 CSS 中進行控制。

如果您正在設計平面佈局，這些動畫將非常容易使用。

對於這支筆，您會發現一些導航懸停事件。這些依賴於純 CSS，它再次以不同的懸停效果控制每個超鏈接。

導航菜單通常非常簡單和通用。這就是為什麼懸停事件可以真正為設計增添趣味，並向訪問者展示您關心小細節的原因。

這些動畫中的大多數都足以適應任何網站，因此它們非常適合輕鬆複製/粘貼到任何佈局中。

您多久會發現帶有無聊字幕且沒有真實背景的照片庫？我經常看到這些，他們只是覺得懶惰。

我真的很喜歡這些照片效果，它們都依賴於簡單的縮略圖庫。懸停圖像時，您會看到照片的標題、說明和“閱讀更多”按鈕。

每個元素從不同的角度滑入視圖，它有助於這個圖片庫從頁面上彈出。

每個瀏覽器都支持默認工具提示，但您始終可以使用插件或像這樣克隆筆來製作自己的工具提示。它由 Ty Strong 開發，展示了純 CSS 工具提示可以走多遠。

整個片段通過定位 HTML <dfn> 標記來工作。當懸停包含在此標籤中的任何文本時，它會在懸停時自動淡入視圖，看起來像一個工具提示。

純 CSS 三角形已經存在多年，因此很容易重新創建工具提示樣式。但最讓我印象深刻的是通過 CSS3 控制的流暢動畫狀態。

這是另一個可以用純 CSS 製作的很酷的東西的例子。這些簡單的按鈕都有隱藏的圖標，只有當光標落在它們上面時才會出現。

每個圖標都來自 Font Awesome，因此您可以使用完全免費的圖標複製此設計。

效果包括滑入、拉伸和淡入淡出的圖標，這些圖標在懸停時出現，在光標移動到其他地方時消失。

網頁分頁總是很無聊，可能是因為它不是界面的華而不實的部分。但是通過 Mariusz Dabrowski 的這種分頁效果，您可以將您的分頁提升到一個新的水平。

這個動畫唯一的特點是它可以從一個頁面加載到另一個頁面。因此，它最適用於整個頁面不會重新加載的Ajax 驅動的頁面。這樣，當新內容加載到視圖中時，整個動畫都是可見的。

它的實用價值肯定有限，但效果非常好。

全屏導航菜單在移動響應網站中非常流行，它們也適用於大多數用戶。但是，當您在 CodePen 上免費獲得這樣的疊加效果時，這些不一定是無聊或靜態的。

開發人員 Ryan Mulligan 使用在單個 CSS 類上運行的純 CSS 關鍵幀創建了這個野獸般的動畫。

點擊事件是通過 jQuery 觸發的，但動作都是 CSS。絕對是我見過的最酷的動畫之一，而且啟動起來非常流暢。

谷歌的材料設計概述了許多動畫效果，其中之一是波紋點擊效果。這在 Android 設備中最為常見，但它也已洩露到網絡上。

使用這支筆，您可以只使用 CSS 代碼在自己的作品中復制漣漪效果。

這個片段的目標是選中時也會亮起的圖標，所以它有點像標籤/選擇頁面元素。但是效果可以轉移到任何容易克隆的東西上。

這是我見過的最獨特的按鈕效果之一，將 SVG 用於形狀，將 CSS 用於動畫。

Coder Dean Hidri 用 80 行 CSS 和幾十行 HTML（包括 SVG）構建了這個魔法按鈕效果。懸停時，此按鈕會在按鈕內為自定義液體形狀設置動畫以創建背景填充，然後再進行動畫處理。

如果您有一個可以使用這種按鈕樣式的網站，那絕對值得一試。

你可以用圖標字體做很多事情，David Darnes 的這些動畫按鈕就是一個很好的例子。

懸停時圖標以不同的方式動畫，每個圖標都有自己的簽名效果。您可能不會在一個網站中使用所有這些圖標，但自定義動畫樣式很容易克隆。它們僅適用於 CSS3，並且適合您選擇的任何圖標字體。克隆幾乎任何網站的一個非常有趣的效果！

這就是我的 UX 效果列表，但這當然不是最終的集合。

如果您在網上搜索，您會發現許多其他按鈕/圖標懸停效果，並且許多都有免費的源代碼。但是，如果您想了解有關自定義 Web 動畫的更多信息，請查看我們為開發人員提供的大量插件和資源列表。