本文阿寶哥將給大家介紹十個 「“酷炫屌"」 的圖像懸停效果,希望阿寶哥精心錄製的十個 Gif 動畫能讓大家眼前一亮,當然更希望這些特效能給大家設計圖片懸停效果帶來一些 「”靈感“」。
感知方向的懸停效果
❝示例說明:該示例會根據鼠標移入的方向展示不同的動畫效果。
示例來源:Noel Delgado
在線地址:https://codepen.io/noeldelgado/pen/pGwFx
❞
「靜態效果圖」
「Gif 動態效果圖」
疊加運動懸停效應
❝示例說明:當鼠標懸停在圖片上時,會產生 3D 的堆疊運動效果。
示例來源:https://tympanus.net/
在線地址:https://tympanus.net/Development/StackMotionHoverEffects/
❞
「靜態效果圖」
「Gif 動態效果圖」
可互動的等距 3D 網格
❝示例說明:當鼠標懸停在 3D 的網格圖片上時,會產生 3D 的堆疊效果。
示例來源:https://tympanus.net
在線地址:https://tympanus.net/Development/IsometricGrids/
❞
「靜態效果圖」
「Gif 動態效果圖」
3D 縮略圖懸停效果
❝示例說明:當鼠標懸停在圖片上時,會產生 3D 的摺疊效果。
示例來源:https://tympanus.net/
在線地址:https://tympanus.net/Tutorials/3DHoverEffects/
❞
「靜態效果圖」
「Gif 動態效果圖」
圖片懸停介紹效果
❝示例說明:鼠標懸停圖片時顯示相應的文字介紹。
示例來源:LittleSnippets.net
在線地址:https://codepen.io/littlesnippets/pen/bpMmBO
❞
「靜態效果圖」
「Gif 動態效果圖」
懸停圖片滑動效果
❝示例說明:鼠標懸停圖片時,圖片會有滑動效果。
示例來源:LittleSnippets.net
在線地址:https://codepen.io/littlesnippets/pen/dGVQvB
❞
「靜態效果圖」
「Gif 動態效果圖」
懸停滑動顯示前景圖
❝示例說明:鼠標懸停在背景圖片上,滑動會顯示前景圖。
示例來源:Hervé
在線地址:https://codepen.io/herve/pen/GoEna
❞
「靜態效果圖」
「Gif 動態效果圖」
放大鏡效果
❝示例說明:使用 CSS3 和 jQuery 實現放大鏡效果。
示例來源:Rohan Hapani
在線地址:https://codepen.io/desirecode/pen/vgwaoe
❞
「靜態效果圖」
「Gif 動態效果圖」
懸停顯示 3D 菜單
❝示例說明:懸停引導按鈕時,顯示其他的功能菜單。
示例來源:Jouan Marcel
在線地址:https://codepen.io/jouanmarcel/pen/NLgVjm
❞
「靜態效果圖」
「Gif 動態效果圖」
懸停圖庫切割合成大圖
❝示例說明:懸停引導按鈕時,顯示其他的功能菜單。
示例來源:Shaw
在線地址:https://codepen.io/shshaw/pen/RyOPzb
❞
「靜態效果圖」
「Gif 動態效果圖」
在日常工作中,如果小夥伴們也想實現圖片懸停特效,阿寶哥推薦一個 Github 上的一個可擴展的、輕量的 CSS 圖片懸停動畫庫 —— 「imagehover.css」 。該庫是一個製作精良的 CSS 庫,允許你輕鬆實現各種圖片懸停效果,支持 「40」 個懸停效果,壓縮後僅有 「19KB」。
參考資源
css-image-hover-animation-effects
▼
往期精彩回顧
▼
聚焦全棧,專注分享 Angular、TypeScript、Node.js 技術棧等全棧乾貨。
回覆 0 進入重學TypeScript學習羣
回覆 1 獲取全棧修仙之路博客地址