zzxworld

用 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 定义。

来看看最终的效果:

一个超链接

版权声明

本文为原创内容, 使用「创意共享 3.0 许可证」。在非商用的前提下可自由转载,需保留来源和署名。