看到一个国外的技术博客中关于A元素有如下图的效果,一时好奇,参考着写了一个。先看效果:

效果描述:当鼠标移动到超链接的文字上面,除了有下划线效果之外,在相同位置还有一条更粗的下划线从左到右动画显示。

从效果反推,涉及到的元素有ul元素、li元素、a元素,此外没有其他html元素,先把HTML代码敲出来:

<ul>
<li><a href="#">付出是会有回报,但也可能没有</a></li>
<li><a href="#">年轻人就得让他们经历挫折,那他们才会成长</a></li>
<li><a href="#">每个人走的路不一样,没有规定第一步第二步</a></li>
</ul>

去除ul元素、li元素、a元素的默认样式。

ul,li{
list-style: none;
margin:0;
padding:0;
line-height: 2em;
}
a:link{
text-decoration: none;
color:#333;
}

首先,当鼠标经过链接文本的时候,会出现一个下划线,这是属于a元素的基本效果。所以,可以确认如下代码:

a:hover{
text-decoration: underline;
}

那么,当鼠标经过时,那条粗的下划线是如何实现的呢?在没有检查元素之前,我大概想到通过jQuery实现,因为这类网页效果,jQuery还是非常擅长的;但是又想到这么简单的效果,使用jQuery未免有点小题大做了,说不定css也能实现,毕竟css3中,对这样简单的动画效果有比较好的实现。所以我猜测,大概率应该是用CSS代码实现,当我查看网页源码时,也正好印证了我的猜测。

主要使用的是background-size属性、background-image属性、transition属性,通过backgrouond-image:linear-gradient()设置粗线的颜色,background-size控制粗线的大小以及效果。

a:link{
text-decoration: none;
color: #333;
background-size: 0 100%;
background-image: -o-linear-gradient(transparent calc(100% - 2px), var(--selection) 2px); /* Opera浏览器私有属性 */
background-image: linear-gradient(transparent calc(100% - 2px), var(--selection)  2px);
background-repeat: no-repeat;
transition: -webkit-background-size 500ms ease-in-out;/* chrome浏览器和safari浏览器私有属性 */
transition: -o-background-size 500ms ease-in-out; /* Opera浏览器私有属性 */
transition: background-size 500ms ease-in-out;
}
a:hover{
text-decoration: underline;
color: var(--selection) ;
background-size: 100% 100%;
}

background-size属性是设置background-image属性的大小。它的属性值可以是一个,也可以是两个,还可以更多。上面代码中出现了两个属性值,第一个属性值表示width,第二个属性值表示height。它的宽度从0%到100%的变化,通过transition属性实现了动画效果。

这个例子的完整代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>A元素的样式</title>
<style>
:root{
--selection: #304ffe;
}
ul,li{
list-style: none;
margin:0;
padding:0;
line-height: 2em;
}
a:link{
text-decoration: none;
color: #333;
background-size: 0 100%;
background-image: -o-linear-gradient(transparent calc(100% - 2px), var(--selection) 2px);
background-image: linear-gradient(transparent calc(100% - 2px), var(--selection)  2px);
background-repeat: no-repeat;
transition: -webkit-background-size 500ms ease-in-out;
transition: -o-background-size 500ms ease-in-out;
transition: background-size 500ms ease-in-out;
}
a:hover{
text-decoration: underline;
color: var(--selection) ;
background-size: 100% 100%;
}
</style>
</head>
<body>
<ul>
<li><a href="#">付出是会有回报,但也可能没有</a></li>
<li><a href="#">年轻人就得让他们经历挫折,那他们才会成长</a></li>
<li><a href="#">每个人走的路不一样,没有规定第一步第二步</a></li>
</ul>
</body>
</html>