用 CSS 给文本链接添加动画效果

网页上默认的文本链接没有什么交互效果，看起来十分单调。使用 CSS 提供的动画特性可以在鼠标移入时加入一点视觉交互效果，丰富其展现形式。来看看是如何实现的吧。

首先来创建一个基础的文本链接标签：

<a href="#">一个超链接</a>

然后给它提供一点基础的 CSS 元素：

a {
    font-size: 2em;
    color: #000;
    text-decoration: none;
}

a:hover {
    color: #903;
}

来看看这段简单代码的效果：

一个超链接

鼠标移入时文字颜色会立马变红，很常见的效果。让我们把 a 标签的默认样式代码调整为如下：

a {
    font-size: 2em;
    color: #000;
    text-decoration: none;
    transition: color 1s 0s;
}

再来看看效果：

一个超链接

仔细观察会发现，现在鼠标移入时，文字颜色的切换不再像刚才那么突兀，有了一点过渡变化的效果。这是刚添加的 transition 属性起作用了。使用它可以为指定的元素属性添加过渡效果。稍微解释一下上面的代码:

color 表示要给文字的颜色属性添加过渡效果
1s 是设置过渡动画的持续时间。s 表示秒，这里可以使用 ms，表示毫秒。
0s 是设置执行过渡动画前的延迟时间。比如鼠标移入或移出文字后多长时间才开始执行过渡动画。

上面虽然给文字实现了一点简单的动画效果，但还不够显眼。来尝试一下加入背景色的动画。

a {
    font-size: 2em;
    color: #000;
    text-decoration: none;
    transition: color 1s 0s;
    position: relative;
}

a::before {
    content: '';
    position: absolute;
    background: #FF0;
    width: 100%;
    height: 40%;
    bottom: 0;
    z-index: -1;

    transform: scaleY(0.25);
    transform-origin: center bottom;

    transition: transform 500ms 0s, background 500ms 0s;
}

a:hover::before {
    height: 100%;
    transform: none;
}

添加了一大堆代码，其思路主要围绕以下几点：

使用 ::before 伪类和 content 属性给文本添加一个可操控的子元素。
在 a::before 选择器中定义了文本背景的初始样式。其中都是一些基础的样式定义。transform 部分是通过变换的方式设置背景下划线的高度。transition 部分就不必多说了，用来控制背景的过渡动画。这里可以看到，transition 属性可以通过逗号来分别设置多个 CSS 属性的过渡效果。
因为背景伪类使用了 absolute 绝对定位，所以在 a 标签的样式中，添加了 relative 相对定位，用来防止背景溢出。
最后通过在 a:hover::before 中设置背景高度，完成整个背景动画效果的 CSS 定义。

来看看最终的效果：

一个超链接

用 CSS 给文本链接添加动画效果

上一篇

下一篇