一种新型超链接交互样式设计与实现

snowmannn

超链接是网页中，必不可少的内容。超链接的交互设计，也是一个网页中最重要的细节。CSS 也为链接准备了几个伪类选择器，用来设置超链接的交互操作。但是在绝大多数网站中，我们看到的超链接交互样式，通常是：改变一下链接的颜色、取消或者增加下划线、点击链接文本变色或者下划线消失等等。但实际上，超链接的交互设计，并非只能这么简单。

很久没有登录 W3C 的官方网站，今天上去看了一下，从第一眼就看到了他们的超练级的与众不同。把鼠标放上，点击，测试了一下他们的超链接交互设计，感觉非常不错，就稍微思考了一下这个设计是如何实现的。稍微思考一下之后，才发现实现这个效果非常的容易，而且新人容性较好。下面就来介绍一下。

先来看一下他们的效果图片，当然，我更推荐直接去 W3C 官方网站看效果。



实现原理和分析

首先，仍然是常规的超链接样式，带一条下划线，但是与普通的超链接样式不同的是，这条下划线要粗（2px 普通的 1px），同时这个下划线和文字颜色不同定义的超链接下划线颜色是和文本相同的）。所以可以肯定，这个下划线是使用 border-bottom 属性定义的，并且 padding-bottom 了几个像素，空开一定距离。然后交互性操作就很简单了，只需要改变一下底边框的颜色就可以了。当点击事件发生的时候，超链接不是简单的改变了颜色，而是向下移动了几个像素，这样给人的错觉就是按下去了一样，这种用户体验是传统超链接仅仅变换颜色所体验不到的。关于这个的实现，需要使用 position 的 relative 属性，激活 top 属性，即可让超链接脱离原来位置向下偏移一定距离。

既然原理分析完毕，那么我们就开始写出相应代码吧。

HTML 结构

随便输入一些字，加上个链接就OK了。

代码不换行代码换行



这里是 潜行者m 随便打的一些字，用来做链接交互样式的演示，链接在这里。这里是 潜行者m 随便打的一些字，用来做链接交互样式的演示，链接在这里。这里是 潜行者m 随便打的一些字，用来做链接交互样式的演示，链接在这里。