• <rt id="adimh"></rt>
  • <cite id="adimh"><noscript id="adimh"></noscript></cite>

      1. <rt id="adimh"></rt>
      <rt id="adimh"><menu id="adimh"></menu></rt>
      <video id="adimh"></video>

        <i id="adimh"><address id="adimh"><sup id="adimh"></sup></address></i>

        1. <cite id="adimh"></cite>
          <rt id="adimh"><optgroup id="adimh"></optgroup></rt>
        2. Menu

          使用圖像增強CSS懸停效果

          <返回列表

          Hover是CSS家族中最古老的選擇器之一。雖然我們習慣于認為它只與一個鏈接完美地配對,但實際上它可以用于界面中的所有元素,如按鈕、SVG、,圖像原因很簡單,就在于它的本質。套用一下規范:當鼠標光標放在元素上時,Hover會選擇它們。因此,無論你想選擇什么,它都會在那里——不管你喜歡與否。

          誰不喜歡呢?這個:hover選擇器允許您使您的網站成為一個信息豐富和舒適的地方為用戶。如果你接受它的力量,你可以很容易地:

          有很多方法可以從中受益。然而,最近引起我們注意的是,開發商正在給平庸乏味的鏈接懸停效應注入新的活力。訣竅在于使用大圖像。雖然乍一看似乎有點離譜,但不知何故,他們設法使這種方法看起來優雅、視覺有趣、引人入勝和大膽。

          次級的

          Subsense是這種微小的、令人耳目一新的趨勢的典型代表。意大利數字機構的主頁充分利用了這種極簡的方法。布局是傳統的,而圖形填充像以往一樣稀少。你會發現這里只有幾塊文本、導航和大量空曠的空白。不過,這個網站并不無聊。

          相反,它看起來令人興奮和新鮮。它以占據屏幕最大份額的作品列表歡迎在線訪客。項目的每一個名稱都伴隨著一個在懸停時出現的相應圖像。它非常大,所以你不會錯過的。

          注意,團隊將注意力集中在文件夾使它成為節目的明星。有了這些,他們就不會再發明輪子,也不會使用任何現代動畫。一切都是整潔的,干凈的,只是輝煌。

          Subsense

          礦山工作室

          Mine Studio的投資組合是如何利用這一趨勢的另一個典型例子。同時,它也展示了如何利用這種效果讓極簡主義為你工作。

          在這里,首頁幾乎沒有內容和視覺效果。它只是一個單一屏幕的演示;盡管如此,它完全符合其目的。英雄區域由一個基于文本的水平滑塊占據,它有三個級別。每一部都有以前作品的標題。將鼠標光標懸停在名稱上時,會出現一個圖像。盡管它不像在次語義的情況下從上到下延伸,但它肯定是吸引眼球的。

          注意兩點。首先,圖片的每一個外觀都被流行的漣漪式過渡效果所豐富,使其看起來時尚而現代。其次,名稱更改其顏色,為選定的元素添加額外的焦點。

          盡管團隊保持著樸素的外表,但英雄區并不簡單。相反,它給人的感覺是一流的。

          Mine Studio

          索科爾來了

          Ada Sokol投資組合背后的團隊采用了相同的方法。

          這是我們收藏的另一個單屏主頁。它也很寬敞,內容非常保守。只有常規導航。最喜歡的作品以鏈接的形式展示。而且,這就是魔法發生的地方。

          懸停狀態不僅觸發圖像的外觀,還觸發其顯示的小技巧。圖像不僅僅在空間中移動;它會變形,留下一些殘缺的圖形。這是一個不尋常的,但成功的方式,以吸引人們對投資組合的關注,以及滿足當前的趨勢。

          Ada Sokol

          尼古拉斯·蘭瑟曼先生 VLNC工作室

          還有一些更有趣的例子,基于圖像的懸停與動作技巧巧妙地結合在一起。想想尼古拉斯·蘭瑟曼和VLNC工作室。

          在尼古拉斯·蘭瑟曼的例子中,圖像不僅僅是出現的——它會移動和旋轉,吸引你的注意力。然而,VLNC的創意機構使用了與鼠標光標. 所以,無論鼠標移動到哪里,圖片都會跟著它留下褪色的痕跡。

          Nicolas Lanthemann

          VLNC Studio

          語言管理員

          如果你認為這種新趨勢只影響到英雄領域,那么你可能會驚訝地發現它無處不在。看看語言管理員。

          支持語言維護者網站設計的團隊利用這種技術來改進主菜單。就像現在大多數網站一樣,導航隱藏在漢堡按鈕. 當它打開時,它會占據整個屏幕。菜單分為兩列。

          每一個鏈接后面都有一個圖像,說明了一切。所以,無論你的目標是什么導航項,你不僅會在頁面底部得到簡短的描述,而且還會得到一個視覺幫助。

          Language Keepers

          尸體

          Corphes背后的團隊在網站的幾個地方都從這個解決方案中獲益。首先,他們給導航系統中常規的基于輪子的列表賦予了熱情。在這里,每個鏈接看起來都是粗體和信息豐富的。

          其次,他們改進了對登陸頁面主要內容的探索。因此,其中一個部分包括由懸停時顯示的圖像支持的文本塊。

          Corphes

          有意識的酒店

          在這里,你會發現在主頁中間使用的趨勢。這是一種古老的技術,但團隊已經設法將其稍加扭曲,以使其看起來不那么普通。

          一開始,你偶然發現了一些空白部分,其中的標題被遮住,以暗示里面隱藏著什么。這樣,團隊就激發了游客的興趣。將光標懸停在框上后,圖像會顯示出來,支持標題及其消息。簡單,但優雅。

          Conscious Hotels

          布雷吉特伯爵

          最后,但并非最不重要的在我們的收藏是勒科姆德布雷吉特。這一趨勢的主要特點是團隊使用視頻而不是圖片,從而擴展了邊界,并向我們展示了我們可以使用不同類型的視覺材料。

          Lecomte de Bregeot

          大形象,大影響

          看到創意者如何將經過時間考驗和枯燥乏味的web界面元素轉變成一場盛宴,真是令人興奮。通常對鏈接起輔助作用的簡單的懸停效果現在已成為主導作用。它再次證明,仍有實驗和改進的空間。


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

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

          聯系我們

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

          聯系云軒總監微信

          微信
          成人视频免费在线观看 - 视频 - 在线观看 - 电影影院 - 品赏网