6 种超链接效果(下)
介绍 CSS 如何让超链接变得更加生动和精彩
4. 字体颜色从右到左变化效果
最终实现的效果就是从右到左把字体从当前颜色变成你想要的颜色，当然这个速度是可以通过参数来控制的。再此之上还加了一个下划线从左到右变化的效果，下面就然我们来看看是如何实现的吧。
首先，我们指定一个颜色渐变效果，to right 表示从左到右，而50%表示两种颜色各占一半：
1
2
3
4
5
6
7
a {
background-image: linear-gradient(
to right,
#54b3d6 50%,
#000 50%
);
}
然后，我们再使用 background-size 属性把背景扩大成链接文字的两倍，这样就只能看到其中一种颜色了，加上之后就是这个样子：
1
2
3
4
5
6
7
8
9
a {
background-image: linear-gradient(
to right,
#54b3d6 50%,
#000 50%
);
background-size: 200% 100%;
background-position: -100%;
}
不过，要让背景颜色融入自己，我们可以使用 webkit 属性，如下再添加两个即可：
1
2
3
4
5
6
7
8
9
10
11
a {
background-image: linear-gradient(
to right,
#54b3d6 50%,
#000 50%
);
background-size: 200% 100%;
background-position: -100%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
注意到我们设置了 background-position 属性为 -100%，这样就只能看到黑色的那一半背景，我们把其设置为 0 就可以看到 蓝色的背景，那么在什么适合设置呢，当然是鼠标放在链接上呀，因此再添加如下：
1
2
3
a:hover {
background-position: 0;
}
不过，似乎少了一点东西，看起来变化的过程很是突然，这是因为我们还没有加动画效果，再次添加如下 transition 即可：
1
2
3
4
5
6
7
8
9
10
11
12
a {
background-image: linear-gradient(
to right,
#54b3d6 50%,
#000 50%
);
background-size: 200% 100%;
background-position: -100%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
transition: all 0.3s ease-in-out;
}
那我们就来看看最后的效果吧。
5. 彩虹下滑线效果
好吧，其实这个实现起来也是很简单的。还是使用 linear-gradient 属性，指定渐变效果。这里指定了两个，一个作为普通下划线，另一个作为鼠标停留后彩虹效果：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
a {
background:
linear-gradient(
to right,
rgba(100, 200, 200, 1),
rgba(100, 200, 200, 1)
),
linear-gradient(
to right,
rgba(255, 0, 0, 1),
rgba(255, 0, 180, 1),
rgba(0, 100, 200, 1)
);
background-size: 100% 3px, 0 3px;
background-position: 100% 100%, 0 100%;
background-repeat: no-repeat;
}
然后，指定背景大小和位置，注意这里有两个。当然对应前面两个background。从参数不难看出鼠标不停留的情况下，第一个背景占据了全部。那么，鼠标停留效果就是到过来的，第二个彩虹效果的占据了全部大小，就得到如下css的设置：
1
2
3
a:hover {
background-size: 0 3px, 100% 3px;
}
还剩下最后一步，没错就是转场动画。添加如下：
1
transition: background-size 400ms
那么我们就来看一下最终的效果吧：
6. 下划线跑火车效果
这个效果实现起来也是相当简单，废话不多说直接上代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
a {
position: relative;
}
a::before {
content: '';
position: absolute;
width: 100%;
height: 4px;
border-radius: 4px;
background-color: #18272F;
bottom: 0;
left: 0;
transform-origin: right;
transform: scaleX(0);
transition: transform .3s ease-in-out;
}
a:hover::before {
transform-origin: left;
transform: scaleX(1);
}
其中几个比较关键的地方是 transform , 使用了 before 伪元素。transform-origin指定了动画开始点，而 transform 指定了从X轴横向扩展。transition 指定动画效果。
来看看最终的效果吧：
代码已在这里准备好，欢迎下载使用。
