下划线 CSS 动画悬停 - CSS (1)

📌 相关文章

📜 下划线 CSS 动画悬停 - CSS (1)

📅 最后修改于: 2023-12-03 15:35:53.586000 🧑 作者: Mango

下划线 CSS 动画悬停 - CSS

当我们需要在网站中添加交互时，动画是最常用的一种方式之一。而下划线 CSS 动画悬停则是其中的一种经典案例。通过在文本下面添加一条下划线，并在鼠标经过时添加 CSS 动画效果，可以使网站更加生动有趣，下面就让我们一起来学习如何实现下划线 CSS 动画悬停。

实现思路

准备工作

在实现下划线 CSS 动画悬停之前，我们需要先在 HTML 中添加文本和下划线。下面是一段示例代码：

<span class="underline">文本</span>

我们可以在 CSS 中为这个文本添加一条下划线，示例如下：

.underline {
  position: relative;
}

.underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background-color: #000;
}

这里要注意设置 position: relative;，使得 ::after 伪元素可以基于 .underline 元素定位。同时，以 bottom: 0; 为基础设置下划线的位置，使其与文本底部对齐。

添加动画效果

在添加了下划线之后，我们就可以为下划线添加动画效果了。我们可以通过设置 transform 属性来实现下划线的缩放动画效果。

.underline:hover::after {
  transform: scaleX(1.5);
}

这里，当鼠标悬停在 .underline 上方时，我们通过设置 transform: scaleX(1.5); 即可实现下划线缩放的效果。同时，为了使动画效果更加自然流畅，我们还可以为 .underline::after 添加 transition 属性，这样在缩放时就会有一个平滑的过渡效果。

.underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background-color: #000;
  transition: transform 0.3s ease;
}

至此，我们就完成了下划线 CSS 动画悬停的实现，并且可以通过调整 scaleX() 的值以及 transition 属性以改变动画效果的速度和效果。

示例代码

以下是完整的示例代码，可以直接复制到 HTML 和 CSS 文件中进行测试：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>下划线 CSS 动画悬停示例</title>
    <style>
      .underline {
        position: relative;
        cursor: pointer;
      }

      .underline::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 2px;
        background-color: #000;
        transition: transform 0.3s ease;
        transform-origin: center left;
        transform: scaleX(0.3);
      }

      .underline:hover::after {
        transform: scaleX(1);
      }
    </style>
  </head>
  <body>
    <span class="underline">文本</span>
  </body>
</html>

注意，在本例中还添加了 cursor: pointer; 属性，以告诉用户该文本是可点击的。同时，为了让动画效果更加平滑，我们可以设置 transform-origin: center left;，使缩放的中心点在下划线左侧。