下划线动画效果

Bunny0212

已于 2024-01-02 21:39:02 修改

阅读量665

点赞数 7

分类专栏：前端文章标签：前端 java

于 2024-01-02 19:31:14 首次发布

本文链接：https://blog.csdn.net/weixin_46533577/article/details/135348144

版权

前端专栏收录该内容

88 篇文章 0 订阅

订阅专栏

下划线动画效果

在这里插入图片描述

下划线动画效果。当鼠标悬停在文本上时，会显示一个下划线，并且采用动画形式展示。

font-weight: 800;：设置文本的字体粗细为粗体。
font-size: 36px;：设置文本的字体大小为 36 像素。
background: linear-gradient(to right, #ec695c, #61c454) no-repeat right bottom;：创建一个从红色到绿色的线性渐变背景，从右到左渐变。
background-size: 0 3px;：设置背景的宽度为 0，高度为 3px，因此一开始不显示下划线。
transition: background-size 1.3s;：定义了背景大小变化的过渡效果，持续时间为 1.3 秒。

font-weight: 800;
font-size: 36px;
background: linear-gradient(to right, #ec695c, #61c454) no-repeat right bottom;
background-size: 0 3px;
transition: background-size 1.3s;

span:hover {
    background-position-x: left;
    background-size: 100% 3px;
}

background-position-x: left;：将背景位置移动到最左边，即开始位置。
background-size: 100% 3px;：将背景宽度设置为 100%，这样就会显示完整的下划线，高度为 3px。

全部代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0"
    />
    <title>下划线动画</title>
  </head>
  <style>
    span {
      font-weight: 800;
      font-size: 36px;
      background: linear-gradient(to right, #ec695c, #61c454) no-repeat right bottom;
      background-size: 0 3px;
      transition: background-size 1.3s;
    }

    span:hover {
      background-position-x: left;
      background-size: 100% 3px;
    }
  </style>
  <body>
    <span>
      下划线动画效果，当鼠标移入时会显示下划线，采用动画形式在实际工作中，可能不会直接使用「算法与数据结构」的知识，但是学习「算法与数据结构」的设计思想和对问题深入的思考、研究，是一个优秀的软件工程师所必备的「编程内功」，从这个角度说，学习「算法与数据结构」是终身收益的。
      在这门课程里，主讲教师将以非常通俗易懂的讲解，带领新手朋友们进入「算法与数据结构」学习的大门，力求在知识讲解以外能带给大家一些启迪和思考。这门课程非常注重知识的循序渐进、算法思想的讲解、示例代码表意清晰，力求帮助新手朋友快速入门算法。
    </span>
  </body>
</html>