別來找我，但我認為可以肯定地說，靜態網站正式成為過去。 如今，人們在訪問網站時期望有一定程度的互動性。 讓你參與其中的方法之一是將懸停動畫新增到你的網站上。

您可以製作的懸停動畫型別沒有限制。 它可以是一個在懸停時放大的簡單按鈕，也可以是一個翻轉3D風格的卡片——可能性是無窮無盡的。

在本文中，我們將探索40個CSS懸停動畫示例——其中10個是我自己建立的。 希望這些示例能幫助您汲取靈感，並為您提供如何讓使用者參與並為他們提供難忘的體驗的想法。 讓我們潛入其中。

40個CSS懸停動畫示例

讓我們先來看看我親自建立的十個自定義動畫，包括演示和程式碼示例！

自定義CSS懸停效果

1. 全息卡(Holographic card)

正如他們所說，你無法擊敗經典。 因此，我們從一個簡單的卡片效果開始，它放大，獲得五顏六色的邊框陰影，並在懸停時閃爍全息漸變。 此動畫適用於：

• ::before pseudo-element: 透過放置具有不同不透明度和旋轉的漸變背景來建立全息效果。 它最初具有0不透明度，在懸停時，它在向下移動時變得可見
• .holographic-card:hover: 應用縮放效果 (transform: scale(1.05)) 和一個發光的盒子陰影 (box-shadow: 0 0 20px rgba(0, 255, 255, 0.5))

2. 液體變形(Liquid morph)

當將滑鼠懸停在按鈕上時，此動畫會在按鈕上建立類似液體的變形效果。 最初，該按鈕具有深藍色背景和居中文字標籤的圓形矩形。 懸停時，按鈕略微旋轉，其邊框半徑縮小，並出現一個彩色的錐狀漸變。 為此動畫提供動力的CSS功能包括：

• ::before pseudo-element: 建立一個圓錐形漸變背景，從青色過渡到深藍色，使按鈕看起來像是液體填充
• .liquid-morph-element:hover: 將邊框半徑降低到10畫素，並應用15度的旋轉，使按鈕具有更稜角的形狀

3. 爆炸性文字效果

當元素懸停時，此動畫會產生“爆炸性”效果。 它與 ::before 和 ::after 偽元素配合使用，產生徑向梯度效果，並在懸停時放大和旋轉。

4. 文字下劃線

此動畫建立了獨特的懸停效果，當用戶將滑鼠懸停在文字上時，下劃線會出現在文字上方和下方。 它由 ::before 和 :after 偽元素提供支援，這些元素建立了下劃線效果。 偽元素在懸停時從0增長到100%，而梯度被應用到它們。

5. 下拉選單

此動畫建立了一個下拉選單，該選單在將滑鼠懸停在按鈕上時會出現。 最初，下拉選單是隱藏的，其不透明度設定為0，但在懸停時完全可見。 此動畫的關鍵是不透明度，在懸停和變換時設定為1：translateY(0)，它將選單移動到正常位置。

6. Double-sided card

這個動畫創造了一個3D翻轉卡片的效果。 當用戶將滑鼠懸停在卡片上時，它沿著Y軸旋轉180度，露出背面。 卡片的正面和背面大小相同，但背景不同，卡片容器上的透視屬性增強了3D效果。

此動畫適用於：

• transform-style: preserve-3d: 允許卡片在旋轉過程中保持其3D位置
• transform: rotateY(180deg): 沿著Y軸旋轉卡片

7. 4角影象

此動畫建立了一個互動式影象效果，影象在懸停時被分為四個象限。 象限代表影象的不同部分，它們在組裝時被定位為建立完整的畫面。 懸停在容器上時，象限向外移動，產生拆分效果。

它適用於：

• background-image: url() 將影象應用於每個象限
• background-position: 裁剪影象的特定象限
• transform: translate() 懸停時向外移動象限

8. Cursor animations

這個動畫有兩個效果。 首先，它在懸停時展示了各種CSS遊標樣式，每個框都有不同的視覺效果，如縮放、旋轉、剪下和脈衝。 以下是推動其影響的細目：

• cursor: 為不同的框定義唯一的遊標型別
• ::before: 建立線性漸變效果，懸停時從左上角線到右下角對角線移動
• @keyframes pulse: 創造一個脈動效果，盒子在大小上反覆增長和縮小
• @keyframes shake: 模擬搖晃或抖動的運動，如用於表示“錯誤”或“不允許”的那種
• @keyframes moveAround: 導致盒子向各個方向略微移動
• CSS transforms: transform: scale(), rotate(), translateY(), translateX(), and skew() 適用於各種盒子

9. 旋轉立方體

這個3D動畫建立了一個互動立方體，有六個面（正面、背面、右側、左側、頂部和底部），每個面都有不同的顏色和微妙的漸變。立方體在3D空間中平穩旋轉，表面上會出現玻璃狀漸變。 它適用於：

• translateZ, rotateX, and rotateY: 放置面以形成一個立方體
• perspective and transform-style: preserve-3d: 確保適當的3D渲染
• @keyframes rotate3d: 建立連續立方體旋轉
• ::before and ::after: 產生懸停時發生的玻璃狀反射

10. 變色龍 SVG

當懸停時，卡片會迴圈瀏覽不同的基於SVG的背景圖案，並在表面上平穩地移動圖案的位置。 它適用於：

• background-image: 使用內聯SVG資料來顯示自定義模式
• @keyframes move-and-color: 定義動畫的階段，指定對背景影象和背景位置的更改

這就是自定義CSS懸停效果。 現在，讓我們來一下其他開發人員的例子。 我們將從檢查卡片懸停動畫開始；檢視此 Codepen 集合，檢視我建立的其他文字動畫。

卡片CSS懸停動畫

這些卡片懸停動畫增加了獨特的效果，將吸引訪問者的注意力。

11. 個人資料卡懸停

Codev Land的配置檔案卡懸停動畫在卡元件上建立了雙層滑動效果。 懸停時，頂部幻燈片（帶有圖示）向上移動，以顯示包含文字的底部幻燈片。 這部動畫依賴於：

• transform: translateY() (docs): 懸停時沿著垂直軸移動每張幻燈片
• transition (docs): 當兩個幻燈片的位置在懸停時發生變化時，會建立流暢的動畫效果

12. CSS 硬懸停效果

Bruno Rocha的CSS硬懸停效果建立了動態卡片懸停效果，頂層在懸停時縮小，以顯示內部文字填充層。 建立者使用過渡屬性新增到卡片中，以在懸停期間動畫更改其高度、邊框半徑和字型大小。

13. 發光漸變玻璃形態卡

Kodplay 的發光漸變玻璃形態卡創造了一個具有懸停動畫效果的視覺吸引力的卡片佈局。 每張卡片都有獨特的風格，具有獨特的漸變背景、模糊效果和懸停互動。 以下是程式碼工作原理的細目：

• ::before and ::after pseudo-elements: 建立漸變傾斜的背景。 懸停時，消除傾斜效果，調整尺寸
• transition: 動畫懸停效果
• span::before and span::after: 在懸停時新增模糊和發光效果
• backdrop-filter (docs): 為卡片內容新增玻璃形態效果
• @keyframes animate: 創意者輕微的垂直運動，以產生動態浮動效果

14. 旅遊卡

Karim jawhar的旅遊卡懸停效果以三張互動式卡片為特色，每張卡片都展示了地標的影象。 當懸停時，卡片會沿著X軸和Z軸旋轉，從而產生3D效果。 此動畫適用於：

• transform: rotateX, rotateZ, translateY, and translateZ 屬性建立了懸停時發生的3D旋轉和定位效果
• transition: 平滑狀態之間的變化，特別是在 transform and box-shadow, 使懸停效果更加流暢

15. Same height cards

Veronica 的相同高度卡片動畫是另一個很好的例子。 當懸停時，卡片會稍微放大，並顯示有關專案的更多資訊，例如“喜歡”圖示和時間資訊。 與此同時，隨著不透明度的降低，影象變得部分不透明。

這部動畫依賴於：

• transform: scale: 懸停時放大卡片，使其看起來“彈出”出來
• card__img--hover class: 處理懸停時背景影象上發生的變化。 更改的影象屬性包括不透明度（文件）、背景大小（文件）和背景位置（文件）

圖示 CSS 懸停效果

讓我們來看看一些圖示懸停效果，這些效果肯定會使您的網站脫穎而出。

16. 社交媒體圖示懸停效果

Ephraim Sangma的社交媒體圖示懸停效果建立了一組Font Awesome社交媒體圖示，在懸停時動畫化。 以下是它如何工作以及所涉及的關鍵要素的細目：

• a:before: 用於在社交媒體圖示上懸停時建立背景顏色效果。 它最初位於按鈕下方。 懸停時，它會向上滑動並填滿圖示的圓圈
• transform: rotateY: 沿著Y軸將圖示旋轉360度，產生翻轉效果

17. Interactive close button

Marius Nicula的互動式關閉按鈕動畫建立了一個互動式按鈕，其內部帶有圓形元素，在懸停時移動和改變顏色。 它適用於以下內容：

• SCSS transition mixin: 建立適用於所有屬性的一致轉換效果
• transform: rotate: 對角線旋轉杆（+45°和-45°）以形成“X”形
• &:hover: 懸停時，條形圖的背景顏色和條形圖中圓圈的位置會發生變化

18. 圖示懸停效果

工程師的圖示懸停效果完成了懸停圖示的圓形背景。 它適用於：

• border-radius: 50% (docs): 賦予列表項圓形
• transform: rotate: 將每個列表項旋轉45°以傾斜半圓
• ::before: 半圓的一半保持靜態和可見
• ::after: 半圓的另一半在懸停時滑入

19. CSS 社交瓷磚動畫

Stockin 的 CSS 社交瓷磚動畫使用CSS建立標題為3D按鈕，這些按鈕在懸停時在空中“懸浮”。 它依靠以下內容來工作：

• CSS transforms (skew(25deg) and rotate(-30deg)): 建立傾斜的卡片效果
• box-shadow: 賦予每個專案深度和3D效果
• ::before and ::after: 透過充當每個物品的“牆”來完成3D效果
• Hover effect: 物品稍微向右和向上移動，盒子的陰影變得更大、更明顯，增強了3D效果

20. 文字和漸變圖示懸停效果

Yixuan 的文字和漸變圖示懸停效果建立了一個帶有擴充套件選單項和彩色懸停效果的動畫導航欄。 以下是它如何工作的細目：

• ::before: 建立一個漸變疊加，在懸停時淡入淡出
• ::after: 在按鈕周圍產生模糊的光芒
• scale(0): 懸停時縮小圖示
• scale(1): 在懸停時放大標題以變得可見
• li: 隨著標題的出現，寬度會增加

連結和選單CSS懸停動畫

讓我們來探索一些連結和選單懸停效果，這些效果可以為導航欄增添魅力。

21. 創意選單懸停效果

Abdel Rhman 的創意選單懸停效果使用 Pug 模板語言動態生成導航選單。 應用的 CSS 樣式使選單項具有簡單但引人注目的懸停效果。 以下是它如何工作的解釋：

• :before: 建立在懸停時縮放到檢視中的邊框線
• :after: 建立展開的背景，以覆蓋懸停時的選單項

22. 選單懸停

Larry Geams 選單懸停效果中的每個選單項都有獨特的左邊框顏色，當用戶將滑鼠懸停在連結上時，背景顏色會滑入以填充連結。 此動畫由附加到每個連結的 ::after 提供支援。 懸停時， ::after 的寬度擴充套件到 100%，使其填充其源元素。

23. Magic line 導航欄動畫

Rock Starwind的 Magic line 導航欄動畫創造了一個光滑的導航欄，具有動態懸停效果。 當用戶將滑鼠懸停在任何連結上時，線條指示器會滑動以與懸停的連結對齊。 以下是動畫的細分：

• position: absolute and bottom: 0：將線條定位在導航欄的底部
• opacity: 將行的預設不透明度設定為0，並在懸停時將其轉換為1
• calc(): 根據懸停連結在網格中的位置，使用–index自定義屬性計算.line的大小和位置
• -index: 基於懸停的連結動態更改，以指示哪個連結處於活動狀態以及.line應該移動的位置
• hover ~ .line: 一個兄弟姐妹選擇器，它根據懸停的連結更新.line屬性（如–index）

24. 波浪形選單線效果

Mehmet Burak Erman 的波浪形選單線效果透過給連結一個波浪線，在懸停時出現在派對上，使連結脫穎而出。 它適用於：

• li:hover: 給連結一個 base64 編碼的 SVG 行作為其背景影象
• @keyframes line: 懸停時為背景的水平位置動畫

25. 桌面選單動畫

Gabriel Antonio 的桌面選單動畫發生了很多事情。 讓我們來探索它是如何工作的。

• translateY: 懸停時移動漢堡包選單的頂部和底部欄的位置
• opacity: 在懸停時隱藏頂部和底部的漢堡包選單欄
• scaleY: 懸停時增加中間漢堡包選單欄的大小
• translateX: 當用戶將滑鼠懸停在漢堡包選單上時，選單從左側向外滑動
• translateY, rotate(-90deg), and opacity: 將“選單”文字旋轉到檢視中，並在懸停時使其可見
• nth-of-type: 為選單項造成驚人的延遲，因此它們一個接一個地動畫化到檢視中

按鈕CSS懸停動畫

使用這些創造性的CSS按鈕懸停效果為您的 CTA 新增字元。

26. 不要按我的按鈕

Alex Hart的 Don’t push me buttons 動畫是一個2比1的軟體包，附帶懸停動畫和點選動畫。 它適用於以下內容：

• transform-style: preserve-3d: 賦予按鈕類似3D的外觀
• translate(0, 0.375em): 懸停時將按鈕略微向下移動，以模擬“按壓”效果
• transform: translate(0em, 0.75em): 透過將按鈕進一步向下移動來模擬單擊按鈕時的完整按鈕按下

27. 下一個按鈕懸停

Imran Pardes 的“下一步”按鈕懸停在粗體、傾斜的背景中顯示 “NEXT” 一詞，並附有一個由三個 SVG 路徑組成的動畫箭頭。 這就是它的工作原理

• transform: translateX: 將箭頭的第一和第二路徑放在螢幕外。 這確保了它們最初被隱藏，然後在懸停時滑入檢視
• @keyframes color_anim: 使箭頭路徑定期呈黃色閃爍
• box-shadow: 陰影在懸停時增加，其顏色變為黃色

28. 睏倦的鳥按鈕

ash_creator的瞌睡鳥按鈕是一個極具創意的動畫，它突破了CSS可能的界限。 這個專案中的鳥類都是用HTML和CSS建立的。 起初，這些鳥兒閉著眼睛睡覺，當它們盤旋時，3個鳥中有2個會醒來。

讓我們看看是什麼讓這個動畫滴答作響：

• @keyframes sleep: 透過交替鳥的高度，給所有角色一個微妙的呼吸/脈動動畫。 這部動畫一直在所有鳥類上播放
• @keyframes wakeup: 切換懸停時所有字元的高度。 懸停時的字元擴充套件
• @keyframes eye and @keyframes eye_2: 建立懸停時發生的眨眼和眼球運動動畫
• @keyframes body_hoo: 角色身體動作
• @keyframes face_pen: 臉部縮放動畫
• letter-spacing: 增加懸停按鈕文字的字母間距
• translateX, rotateY, and translateX: 懸停按鈕的背景動畫

29. 彩虹按鈕懸停

Thiago Marques 的彩虹按鈕懸停效果色彩斑斕，令人著迷。 當用戶將滑鼠懸停在一組彩虹色按鈕上時，會出現透過多種顏色過渡的滑動漸變動畫，給人一種移動彩虹背景的錯覺。 此效果由以下方式驅動：

• @keyframes slidebg: 更改背景漸變的背景位置，以模擬懸停時的移動彩虹效果
• background-image: 定義每個按鈕的線性漸變顏色

30. 3D 混合模式按鈕

Lisi 的 3D 混合模式按鈕從 Oleg Frolov 那裡汲取靈感，具有 3D 外觀。 當用戶將滑鼠懸停在按鈕上時，它使用三層顏色來建立類似晃動的動畫，使按鈕具有類似 3D 的外觀。 此動畫由以下方式提供動力：

• perspective: 給按鈕一個3D檢視
• transform: 創造旋轉效果
• @keyframes rotateAngle: 使用rotoneY在連續迴圈中旋轉Y軸上的主容器
• @keyframes translateWobble: 將搖擺效果應用於懸停按鈕的::before和::after偽元素。 它使用變換：translate3d來轉換所有三個軸（X、Y、Z）的元素
• mix-blend-mode: 設定為顏色躲避，並使偽元素的顏色混合，創造出引人注目的色彩對比效果

影象CSS懸停動畫

這些影象懸停效果將視覺效果轉化為互動藝術。

31. 幀懸停效果

Temani Afif 的框架懸停效果中的影象最初顯示時沒有邊框/框架。 然而，當懸停時，會出現一個邊框，影象變得明亮，幾乎就像黑暗的面紗被移除了一樣。 懸停時調整以下屬性以建立此動畫：

• outline: 預設情況下，輪廓覆蓋影象。 然而，在懸停時，其厚度變為更薄的值，產生收縮邊框的效果
• outline-offset: 定義影象和輪廓之間的間隙

32. 雙重影象效果

Temani Afif 的雙重影象效果提供了一個對角線分割的盒子，兩側都有一個影象。 當將滑鼠懸停在左角的影象上時，它填滿了 75% 的螢幕。 R右上角的影象也是如此。 這個動態的“滑動三角形顯示”動畫依賴於：

• clip-path: 定義影象的三角形區域
• --_p CSS variable in clip-path: 在懸停時動態調整剪下多邊形的大小和位置。 這導致三角形區域變大或變小，或多或少地露出影象

33. 影象懸停效果

當用戶在Ivan Grozdic建立的影象懸停效果中將滑鼠懸停在特定影象上時，所有其他影象都會變暗（opacity: 0.1），而懸停的影象仍然完全可見（opacity:1）。

同時，影象放大並旋轉3°，而與影象相對應的蒙面文字出現在螢幕中央。

此動畫適用於：

• opacity: 控制懸停影象的不透明度
• scale and rotate: 當影象懸停時，建立縮放效果
• scale: 懸停時放大文字
• mix-blend-mode: difference: 將遮蔽效果應用於文字，使其適應其背景

34. Gallery hover effect

在Bobby Korec的畫廊懸停效果中，影象在懸停時放大，而標題文字向上滑動並向下縮放，創造出乾淨且具有視覺吸引力的效果。 它適用於：

• transform: scale(2): 懸停時放大影象，建立縮放效果
• bottom: 300px and transform: scale(.4): 懸停時向下縮放文字，並移動其位置以建立向上滑動效果

35. 遮蔽懸停光線

Ana Tudor的遮蔽懸停光線效果在影象上創造了動態效果，其中一系列漸變和遮罩用於建立其他“影象”，這些“影象”在懸停時從原始影象延伸。 它類似於魷魚向外延伸的觸角，並與以下方面一起工作：

• mask: 應用多個徑向和線性梯度，控制影象可見和遮蔽的區域
• filter: grayScale: 給影象一個灰度效果，在懸停時會發生變化

我特別喜歡的另外五個創意CSS懸停效果

最後，讓我們再探索五個懸停動畫，這些動畫不適合任何一個類別，但我發現它們真的很吸引人。

36. Scotch VHS

BlurSoulx 的 Scotch VHS 主頁效果用五種型別的動畫為產品主頁增添了色彩：

• 微妙的入口動畫：在頁面載入時建立淡入效果。 它依靠@keyframes生成來動畫頁面的不透明度從0到1，並給頁面一個不斷增長的框陰影
• 球體懸停效果：一系列背景漸變變化、框陰影效果和放大效果應用於懸停上的按鈕和連結
• 導航連結懸停效果：連結和CTA具有各種懸停效果
• 動畫GIF紋理效果：在懸停時將動畫GIF紋理應用於主容器的::後偽元素。 它使用混合混合模式：螢幕使效果更加豐富多彩

37. 除了我之外的所有人(All but me)

Mojtaba Seyedi的all-but-me博客頁面效果在卡片網格上引入了互動式懸停效果，懸停在一張卡片上會突出顯示其他卡片。 它適用於以下內容：

• :has() pseudo-class: 以父 .card-list 為目標，以檢測是否有任何 li child 被懸停（:has（li:hover））。 它確保模糊效果僅在懸停事件發生時適用
• :not() pseudo-class: 用於從模糊效果中排除懸停的卡片（li:not(:hover)）
• filter: blur(): 對未懸停的卡片應用模糊過濾器（blur（4px）），以減去它們的強調。 這使得懸停的卡片在人群中脫穎而出

38. 立方體懸停效果

Greg Vissing 的立方體懸停效果創造了一個動態的 3D 樣效果，堆疊的立方體在懸停時在各種色調中旋轉，使結構具有引人注目的彩色過渡效果。 它適用於：

• @keyframes animate: 在.container上應用色相旋轉過濾器，建立流暢的色彩過渡，在5秒內無限迴圈
• translate(): 賦予結構類似3D的定位
• :before and :after: 為立方體建立側面和頂部表面

39. 內向陰影

Smashing Magazine的內向陰影效果創造了一個互動和多彩的疊加效果，其中代表新聞出版物的三個圓形元素在懸停時轉換，以顯示其徽標。 它由以下方面提供動力：

• box-shadow: 給圓圈一個微妙的陰影
• .item:hover: 使文字透明並過渡框陰影，露出裡面的徽標

40. X-ray

最後但並非最不重要的是Josetxu的X射線效果，這簡直令人震驚。 這張動畫展示了懸停時人體的X光片。 還有兩個按鈕，用於在全身檢視和全X光檢視之間切換。 為此動畫提供動力的CSS很長且相當複雜，但為它提供動力的一些關鍵內容是：

• @keyframes startup-scaner: 在啟動序列期間控制掃描器疊加的初始移動
• @keyframes startup-skeleton: 在啟動動畫期間逐漸顯示骨架層
• clip-path: 掩碼並顯示與掃描區域同步的骨架，在使用者互動時產生動態效果

你應該知道的懸停動畫工具和庫

Hover.css

Hover.css 是 CSS 驅動的懸停效果集合，您可以將其應用於影象、連結、SVG、按鈕等。 這是一個重量為6.7kb的輕量級圖書館（壓縮+gzip壓縮）。

Hover.css 提供超過110個動畫效果，用於動畫 CSS 屬性，如背景顏色、邊框、陰影和圖示。

Mocassin.css

Mocassin.css 為字幕提供了20多個懸停效果的集合。 它旨在透過具有視覺吸引力的動畫和過渡來增強使用者互動。 該庫易於使用，不需要廣泛的自定義或設定。

iHover

iHover 是20種懸停效果的集合，您可以將這些效果應用於您的網站。 該庫建立在 SCSS 上，與 Bootstrap 等 CSS 框架相容。

結論

為您的網站新增懸停動畫是為訪問者提供更具吸引力和互動式使用者體驗的好方法。 無論您是增強按鈕、影象、文字還是其他元素，這些動畫都可以為您的設計增添個性和深度，留下更深刻的印象。

我們相信您從我們在本文中探索的CSS懸停動畫中獲得了靈感。