使用CSS和JavaScript为超链接带来创意的8种方法

时间：2024-05-20 06:30:02 | 来源：建站知识

时间：2024-05-20 06:30:02 来源：建站知识

自互联网开始以来，古老的超链接一直是至关重要的功能。还记得当您发现一次单击就可以将您带到世界任何地方时感到惊讶吗？

好吧，也许那一瞬就过去了。但是链接仍然像以往一样重要。这是设计师必须使它们既显而易见又易于使用的东西。

尽管简单，但带下划线的文本链接的默认行为效果很好。但是，现代CSS和JavaScript允许我们做更多的事情。链接不仅比以往更漂亮，而且还可以提供更大的上下文并适合您的整体品牌。

今天，我们将向您展示一些超出寻常的链接样式的示例。它们脱颖而出，可以带来更好（或更有趣）的用户体验。

如何巧妙地脱颖而出

提供与文本本身对比的链接下划线可能是一个很好的解决方案。对于用户而言，它们是直观地，而无需过多地使用样式。在此，蓝色下划线将其自身与深色文本很好地分开。精美的悬停动画只会增加体验。

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）有时看起来很尴尬。但是此动画“吉他弦”演示提供了一致的外观。这是一件小事，但却为整体设计带来了统一的整洁度。

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

即将出现

在以下正文中查看带下划线的链接。两侧的页边距导致下划线无法完全覆盖链接文本的整个宽度。悬停时，下划线会平滑转换以覆盖空白区域。这种微交互仍然很微妙，但是非常用户友好。

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

有线风格

带有下划线的链接最初是由Wired.com广受欢迎的。尽管此后出版物风格不断发展，但它们的传承仍然值得考虑。用户很难错过这些超链接-但是样式的影响并没有太大。这是设计师应追求的平衡方式。

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

动画集锦

悬停效果是一种在网站的超链接中添加个性的好方法。以这个CSS关键帧为例。它可以转换基本文本，并在悬停时产生引人注目的突出显示效果。它看起来很酷，并有助于同时指导用户。

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

边际语境

链接本身并不总是提供完整的上下文。当然，其中一些取决于内容本身。但是实际上只有这么多文本可以超链接。这就是该示例派上用场的地方。它添加了侧面显示的引文内容。将鼠标悬停在连接上也会突出显示相关引用。这可能非常适合学术工作甚至是教程。

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

移动工具提示

如果引文不适合您的项目，也许工具提示可以胜任。使用此jQuery脚本，您几乎可以将工具提示添加到任何元素-包括链接。而且，它们将与您的光标一起向右移动。

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

选择

悬停动画可以帮助确保用户知道他们的光标在正确的位置。如果您正在寻找既引人入胜又轻巧的动画，那么值得一试的效果集。有许多吸引人的内容可以增强您的连接。

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

以引人注目的风格链接

装饰网站的超链接是提高可用性的最简单方法之一。在吸引更多用户甚至增加转化之间，可能只有几行CSS。

上面的示例演示了各种不同的方法。有些比较复杂，而有些则很简单。太好了，因为这些效果并非一刀切。关键在于选择适合您的站点并吸引特定受众的解决方案。

链接太重要了，不容忽视。希望这些例子能激发您做更多的事情。