当前位置: 首页>资讯中心>网站建设>文章正文

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

发布时间:2021-01-26 08:35访问人数:227来源:浪知潮网络

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

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

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

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

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

如何巧妙地脱颖而出

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

降序字符说明

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

即将出现

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

有线风格

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

动画集锦

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

边际语境

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

移动工具提示

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

选择

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

以引人注目的风格链接

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

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

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

版权:【注明为本站原创的文章,转载请注明出处与原文地址!本站部分转载文章能找到原作者的我们都会注明,若文章涉及版权请发至邮箱:service@langzhichao.com,我们以便及时处理,可支付稿费。向本站投稿或需要本站向贵司网站定期免费投稿请加QQ:1115814032】

SEO按天计费

南京浪知潮网络科技有限公司 Copyright © 2012-2019 All Rights Reserved.未经许可,不可拷贝或镜像 备案号:苏ICP备16047803号-4   网站地图