动态下划线效果是之前在有的主题上看到的(好像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 出现了一点问题=-=