网站建设

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

约 3 分钟读完 1133 字 273 次浏览

同栏目更多 已复制

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

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

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

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

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

如何巧妙地脱颖而出

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

降序字符说明

带下划线的字符(例如小写的g,j或p)有时看起来很尴尬。但是此动画"吉他弦"演示提供了一致的外观。这是一件小事,但却为整体设计带来了统一的整洁度。

即将出现

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

有线风格

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

动画集锦

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

边际语境

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

移动工具提示

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

选择

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

以引人注目的风格链接

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

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

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

本文标签 网站设计 网站开发

版权声明:注明为本站原创的文章,转载请注明出处与原文地址!本站部分转载文章能找到原作者的我们都会注明,若文章涉及版权请发至邮箱 service@langzhichao.com,以便及时处理。文中数据引自公开资料与团队实操复盘,仅供参考。

让品牌出圈 让生意上门

17 年建站与优化经验 · 1000+ 服务案例 · 免费获取专属方案与报价——从策划、设计、研发到推广与售后,一站搞定。

Cookie 使用提示 本站使用 Cookie 与同类技术优化浏览体验、分析访问数据。点击「同意」或继续浏览即表示您知悉并同意此设置。了解详情