动态下划线效果是之前在有的主题上看到的(好像hexo之类的静态站点喜欢做这些东西?),当时看到的时候觉得:“waかこいい”。正好最近翻新 srv,就把这个想法在 srv 和本站实现了一遍。

效果:

鼠标悬停时下划线从中间展开,点击时下划线抬高。

代码:

a, a:link, a:visited {
	position:relative;
	color: #7db9de;
	text-decoration:none;
} a::before {
	content: "";
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 100%;
	height: 2px;
	background: #7db9de;
	transform: scale(0);
	transition: all 0.3s;
} a:hover::before {
	transform: scale(1);
} a:active::before {
	height: 5px;
	bottom: 1px;
}

div a {
	color: #fff;
} div a::before {
	display: none;
}

代码解释

首先看<a>标签的代码:

a, a:link, a:visited {
	position:relative;
	color: #7db9de;
	text-decoration:none;
}

text-decoration:none;一句关闭了链接标签的默认,因为原生的下划线肯定没有办法做特效,所以要自己写下划线,就要把原生下划线关闭。

position:relative;定义了一个位置信息,为下面的元素做参照物用。

a::before {
	content: "";
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 100%;
	height: 2px;
	background: #7db9de;
	transform: scale(0);
	transition: all 0.3s;
}

在这里就是定义了下划线本身了。

::before是 css 的伪元素选择器。::before伪元素所控制的元素的位置在元素的前方。在这里,我们使用把这个元素作为下划线来定义。

content: "";为“下划线”文本内容,因为是下划线,所以肯定没有内容,留空。

而下面的三句就是定义下划线的位置的属性。

position: absolute;指明了这个“下划线”以其“父元素”位置为基准。

left: 0; bottom: -2px;指明了下划线左边与其“父元素”左边对齐,底部距离父元素 -2px,即往下偏移 2px。

下面的就是这个下划线的样式属性

width: 100%;下划线的宽度,其基准物为主体元素本身,也就是<a>标签的宽度。height: 2px;下划线的高,这里一般根据字体大小来确定。background: #7db9de;为下划线的颜色,因为这个“下划线”实际上就是一个像是<div>一样的元素,所以用 background 定义颜色。

再往下就是动画效果。

transition: all 0.3s;定义了动画的速度,即从动画开始到结束的用时。

transform: scale(0);将下划线变形为 0% 的大小,因为鼠标不悬浮在上面时,下划线是不显示的。transform 的变形中心位置为元素中心,这样,就做到了以中心为基础的下划线展开。

a:hover::before {
    transform: scale(1);
} a:active::before {
    height: 5px;
    bottom: 1px;
}

这里定义了下划线在各种动作下的属性。

a:hover::before { transform: scale(1); }即定义了鼠标悬浮时,下划线以 100% 大小显示。如上面所说的,transform 的变形中心位置为元素中心,所以就达到了如预览上的效果。

a:active::before定义的属性,就是在链接激活(按下)时的抬高效果。

是的,到这里,整个链接下划线动画就结束了!

“诶~那么后面还有的内容呢?”

div a {
	color: #fff !important;
} div a::before {
	display: none;
}

这里,实际上是为了兼容性考虑。

众所周知,超级多的地方,都用<div><a>文本</a></div>这样的组合来达到按钮的效果。这一行就是为了这些情况考虑。如果不加入这些,你就极有可能看到:

这样的问题。

为了避免这种问题,使用div a { color: #fff !important; }将颜色改回白色(也可以不要=-=),使用div a::before { display: none; }关闭下划线。

其实,这种全局定义,问题一般不仅有这么多,不管如何,修复这种问题都需要一定的技术和复杂的手段,这个办法也只是修复了一个问题。要想有很好的兼容性,还是要自己慢慢修改,定义吧。


1 条评论

Sukazyo · 2020-03-25 下午2:12

好像 gif 出现了一点问题=-=

发表评论

电子邮件地址不会被公开。 必填项已用*标注