6 种超链接效果(下)

介绍 CSS 如何让超链接变得更加生动和精彩
4. 字体颜色从右到左变化效果
最终实现的效果就是从右到左把字体从当前颜色变成你想要的颜色,当然这个速度是可以通过参数来控制的。再此之上还加了一个下划线从左到右变化的效果,下面就然我们来看看是如何实现的吧。
首先,我们指定一个颜色渐变效果,to right 表示从左到右,而50%表示两种颜色各占一半:
a {
background-image: linear-gradient(
to right,
#54b3d6 50%,
#000 50%
);
}
然后,我们再使用 background-size 属性把背景扩大成链接文字的两倍,这样就只能看到其中一种颜色了,加上之后就是这个样子:
a {
background-image: linear-gradient(
to right,
#54b3d6 50%,
#000 50%
);
background-size: 200% 100%;
background-position: -100%;
}
不过,要让背景颜色融入自己,我们可以使用 webkit 属性,如下再添加两个即可:
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 就可以看到 蓝色的背景,那么在什么适合设置呢,当然是鼠标放在链接上呀,因此再添加如下:
a:hover {
background-position: 0;
}
不过,似乎少了一点东西,看起来变化的过程很是突然,这是因为我们还没有加动画效果,再次添加如下 transition 即可:
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 属性,指定渐变效果。这里指定了两个,一个作为普通下划线,另一个作为鼠标停留后彩虹效果:
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的设置:
a:hover {
background-size: 0 3px, 100% 3px;
}
还剩下最后一步,没错就是转场动画。添加如下:
transition: background-size 400ms
那么我们就来看一下最终的效果吧:
6. 下划线跑火车效果
这个效果实现起来也是相当简单,废话不多说直接上代码:
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 指定动画效果。
来看看最终的效果吧:
代码已在这里准备好,欢迎下载使用。