使用CSS和JavaScript為超鏈接帶來創(chuàng)意的8種方法

時(shí)間：2024-05-20 06:30:02 | 來源：建站知識(shí)

時(shí)間：2024-05-20 06:30:02 來源：建站知識(shí)

自互聯(lián)網(wǎng)開始以來，古老的超鏈接一直是至關(guān)重要的功能。還記得當(dāng)您發(fā)現(xiàn)一次單擊就可以將您帶到世界任何地方時(shí)感到驚訝嗎？

好吧，也許那一瞬就過去了。但是鏈接仍然像以往一樣重要。這是設(shè)計(jì)師必須使它們既顯而易見又易于使用的東西。

盡管簡單，但帶下劃線的文本鏈接的默認(rèn)行為效果很好。但是，現(xiàn)代CSS和JavaScript允許我們做更多的事情。鏈接不僅比以往更漂亮，而且還可以提供更大的上下文并適合您的整體品牌。

今天，我們將向您展示一些超出尋常的鏈接樣式的示例。它們脫穎而出，可以帶來更好（或更有趣）的用戶體驗(yàn)。

如何巧妙地脫穎而出

提供與文本本身對(duì)比的鏈接下劃線可能是一個(gè)很好的解決方案。對(duì)于用戶而言，它們是直觀地，而無需過多地使用樣式。在此，藍(lán)色下劃線將其自身與深色文本很好地分開。精美的懸停動(dòng)畫只會(huì)增加體驗(yàn)。

https://codepen.io/aaroniker/embed/preview/eYdOYvj?height=600&theme-id=dark&default-tab=result&user=aaroniker&slug-hash=eYdOYvj&preview=true&pen-title=Link%20hover%20w%2F%20line&name=cp_embed_1

降序字符說明

帶下劃線的字符（例如小寫的g，j或p）有時(shí)看起來很尷尬。但是此動(dòng)畫“吉他弦”演示提供了一致的外觀。這是一件小事，但卻為整體設(shè)計(jì)帶來了統(tǒng)一的整潔度。

https://codepen.io/jimmyplaysdrums/embed/preview/vOMRQw?height=600&theme-id=dark&default-tab=result&user=jimmyplaysdrums&slug-hash=vOMRQw&preview=true&pen-title=Guitar%20String%20Link%20Underlines&name=cp_embed_2

即將出現(xiàn)

在以下正文中查看帶下劃線的鏈接。兩側(cè)的頁邊距導(dǎo)致下劃線無法完全覆蓋鏈接文本的整個(gè)寬度。懸停時(shí)，下劃線會(huì)平滑轉(zhuǎn)換以覆蓋空白區(qū)域。這種微交互仍然很微妙，但是非常用戶友好。

https://codepen.io/nickcil/embed/preview/aFbcm?height=600&theme-id=dark&default-tab=result&user=nickcil&slug-hash=aFbcm&preview=true&pen-title=Link%20Style%20Tests&name=cp_embed_3

有線風(fēng)格

帶有下劃線的鏈接最初是由Wired.com廣受歡迎的。盡管此后出版物風(fēng)格不斷發(fā)展，但它們的傳承仍然值得考慮。用戶很難錯(cuò)過這些超鏈接-但是樣式的影響并沒有太大。這是設(shè)計(jì)師應(yīng)追求的平衡方式。

https://codepen.io/mikemai2awesome/embed/preview/BIEgp?height=600&theme-id=dark&default-tab=result&user=mikemai2awesome&slug-hash=BIEgp&preview=true&pen-title=Wired.com%20Huge%20Underlined%20Link%20Style&name=cp_embed_4

動(dòng)畫集錦

懸停效果是一種在網(wǎng)站的超鏈接中添加個(gè)性的好方法。以這個(gè)CSS關(guān)鍵幀為例。它可以轉(zhuǎn)換基本文本，并在懸停時(shí)產(chǎn)生引人注目的突出顯示效果。它看起來很酷，并有助于同時(shí)指導(dǎo)用戶。

https://codepen.io/auginator/embed/preview/RKvqMB?height=600&theme-id=dark&default-tab=result&user=auginator&slug-hash=RKvqMB&preview=true&pen-title=CSS3%20Keyframes%20Animation%20Link%20Style&name=cp_embed_5

邊際語境

鏈接本身并不總是提供完整的上下文。當(dāng)然，其中一些取決于內(nèi)容本身。但是實(shí)際上只有這么多文本可以超鏈接。這就是該示例派上用場(chǎng)的地方。它添加了側(cè)面顯示的引文內(nèi)容。將鼠標(biāo)懸停在連接上也會(huì)突出顯示相關(guān)引用。這可能非常適合學(xué)術(shù)工作甚至是教程。

https://codepen.io/AmeliaBR/embed/preview/QGNPWb?height=600&theme-id=dark&default-tab=result&user=AmeliaBR&slug-hash=QGNPWb&preview=true&pen-title=Links%20with%20Marginalia%20Notes&name=cp_embed_6

移動(dòng)工具提示

如果引文不適合您的項(xiàng)目，也許工具提示可以勝任。使用此jQuery腳本，您幾乎可以將工具提示添加到任何元素-包括鏈接。而且，它們將與您的光標(biāo)一起向右移動(dòng)。

https://codepen.io/EricPorter/embed/preview/xdJLaG?height=600&theme-id=dark&default-tab=result&user=EricPorter&slug-hash=xdJLaG&preview=true&pen-title=Moving%20tooltip%20on%20anything%20-%20mouse%20tracking&name=cp_embed_7

選擇

懸停動(dòng)畫可以幫助確保用戶知道他們的光標(biāo)在正確的位置。如果您正在尋找既引人入勝又輕巧的動(dòng)畫，那么值得一試的效果集。有許多吸引人的內(nèi)容可以增強(qiáng)您的連接。

https://codepen.io/jltk/embed/preview/dMvGvG?height=600&theme-id=dark&default-tab=result&user=jltk&slug-hash=dMvGvG&preview=true&pen-title=SCSS%20link%20hover%20animations&name=cp_embed_8

以引人注目的風(fēng)格鏈接

裝飾網(wǎng)站的超鏈接是提高可用性的最簡單方法之一。在吸引更多用戶甚至增加轉(zhuǎn)化之間，可能只有幾行CSS。

上面的示例演示了各種不同的方法。有些比較復(fù)雜，而有些則很簡單。太好了，因?yàn)檫@些效果并非一刀切。關(guān)鍵在于選擇適合您的站點(diǎn)并吸引特定受眾的解決方案。

鏈接太重要了，不容忽視。希望這些例子能激發(fā)您做更多的事情。