Menu

10個自定義CSS和JavaScript代碼片段,用于懸停和單擊效果

<返回列表

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

如果你正在尋找一些很酷的想法來復制到你自己的項目中,那么這個集合一定會為你帶來一些東西。任何一個懂一點JavaScript和CSS的人都可以很容易地調整這些效果,使其在任何瀏覽器、任何網站上都能工作,并使布局體驗煥然一新。

按鈕懸停效果

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

每個效果都使用純CSS制作動畫。其中一些按鈕依賴JavaScript進行mouseover事件,但是所有的動畫仍然在CSS中被控制。

如果你在設計平面布置圖這些動畫將是超級容易的工作。

導航懸停

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

導航菜單通常非常簡單和通用。這就是為什么懸停事件可以真正增加設計的情趣,并向游客展示你對小細節的關心。

這些動畫中的大多數都很溫和,可以放在任何網站上,所以它們非常適合于輕松復制/粘貼到任何布局中。

照片效果懸停

你經常發現圖片庫有無聊的副標題,沒有真實的背景?我經??吹竭@些,他們只是覺得懶。

我真的很喜歡這些照片效果所有這些都依賴于簡單的縮略圖庫。當你在圖像上懸停時,你會看到照片的標題、描述和“閱讀更多”按鈕。

每個元素從不同的角度滑入視圖中,這有助于圖像庫從頁面中彈出。

CSS工具提示

每一個瀏覽器都支持默認的工具提示,但您可以隨時創建自己的工具提示使用插件或者通過克隆像這樣的鋼筆. 它是由tystrong開發的,它展示了純CSS工具提示所能達到的程度。

整個代碼段的工作原理是以HTML為目標<dfn> tag. 當鼠標懸停在該標記中的任何文本時,它將自動淡入視圖,并顯示為工具提示。

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

懸停時的CSS圖標

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

每個圖標都來自象形異體字所以你可以復制這個設計完全免費的圖標。

這些效果包括滑入、拉伸和淡入圖標,這些圖標在懸停時顯示,當光標移動到其他位置時消失。

無限分頁

網頁分頁總是很無聊的,可能是因為它不是界面上華麗的一部分。但是這種分頁效果通過Mariusz Dabrowski,您可以將分頁提高到下一個級別。

這個動畫唯一的特點是它可以從一個頁面加載到另一個頁面。所以它與Ajax支持的頁面整個頁面無法重新加載。這樣,當新內容加載到視圖中時,整個動畫都是可見的。

它的實用價值是有限的,但效果是極好的。

覆蓋導航動畫

全屏導航菜單在移動響應網站中非常流行,它們也適用于大多數用戶。但這些不一定是無聊的或靜止的,當你有像這樣的疊加效果免費使用CodePen。

開發人員ryanmulligan用一個CSS類上運行的純CSS關鍵幀創建了這個糟糕的動畫。

click事件是通過jQuery觸發的,但是動作都是CSS。絕對是我看過的最酷的動畫之一,而且它的啟動非常流暢。

純CSS點擊效果

谷歌的材料設計概述了許多動畫效果,其中一個是漣漪單擊效果。這在Android設備中最常見,但它也泄露到了網絡上。

這支筆你只需使用CSS代碼就可以在自己的工作中復制漣漪效應。

這個代碼段的目標圖標在選中時也會亮起,因此它更像是在選擇頁面元素。但是這種效果可以轉移到任何一個可以輕易克隆的東西上。

法力按鈕

這是我見過的最獨特的按鈕效果之一,它使用SVG作為形狀,CSS用于動畫。

編碼器迪安·希德里建造此法力按鈕效果SVG(僅包含一打行的CSS和一打行的HTML)。懸停時,此按鈕在按鈕內設置自定義液體形狀的動畫,以創建背景填充,然后再設置動畫。

如果你有一個網站,可以使用這種按鈕風格,這絕對值得玩玩。

經典按鈕FX

你可以用圖標字體和這些動畫按鈕大衛·達恩斯就是一個很好的例子。

當鼠標懸停時,圖標以不同的方式設置動畫,每個圖標都有自己的簽名效果。您可能不會在一個網站中使用所有這些圖標,但自定義動畫樣式很容易克隆。它們只在CSS3上工作,它們適合任何圖標字體你自己選擇。一個非常有趣的效果克隆幾乎任何網站!

我的UX效果列表到此為止,但這肯定不是最終的集合。

如果你在網上搜索,你會發現很多其他的按鈕/圖標懸停效果,而且很多都有免費的源代碼。但是如果你想了解更多關于定制網絡動畫的信息,請查看我們的大名單開發人員的插件和資源。


最新網站設計資訊
企業網站建設

企業網站建設優化一條龍,多年品牌網站設計,營銷網站開發,手機網站制作,響應式網站設計

聯系我們

電話:18868949445QQ:1611387063 郵箱:[email protected]

聯系云軒總監微信

微信
拼拼有礼
|拼拼有礼注册|拼拼有礼app下载|拼拼有礼下载