CSS奇思妙想：动态点亮文本下划线

努力的小朱同学

于 2024-12-04 20:30:35 发布

阅读量1k

点赞数 14

分类专栏：花样CSS 文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_45092437/article/details/144120610

版权

花样CSS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

一、简介

在现代网页中，为用户提供流畅且具有吸引力的交互体验至关重要。本文分享了一种纯CSS实现的动态文本下划线效果。当鼠标悬停在文本上时，无论文本的宽度如何、有多少行、行中有多少字，下划线都会以从左到右、从上到下的顺序，自适应的在文本底部动态、平滑地显示出来。而当鼠标移出时，下划线则按照相反的方向，逐行动态、平滑地隐藏，直到恢复至最初状态。具体效果如下：

案例效果：

在这里插入图片描述

该动画效果看起来很简单，具体实现也确实不难，难的是实现思路，需要扎实的前端CSS基础和很大的脑洞。该动画效果中利用到了：行内元素的基础特性、元素背景特性、trasition过渡等CSS的基础知识。

该动画可用于资料列表、新闻列表等页面场景中，可以突出显示鼠标所聚焦的文本内容，提升用户的视觉交互体验。

二、具体实现

1、实现思路

① 看到文本下划线，我们首先会考虑通过text-decoration属性来实现，将文本的该属性默认状态设置为none，然后在hover的时候将其设置为underline，使文本出现下划线。但仔细想想，会发现这个方案并不可取，因为text-decoration是一个离散属性，只能在不同属性值状态之间切换，无法通过trasition过渡实现平滑动画。

② 排除掉text-decoration属性之后，我们继续思考还有什么样式属性可以实现类似下划线的效果。此时应该想到两个属性：border和background。然后进一步思考，发现border只能控制宽度或者颜色，而且每一行的border只能同时显示，或者同时隐藏，无法实现逐行按序显示/隐藏下划线的效果。排除掉border后，最终确定需要依赖background属性来实现目标效果。

③ 确定属性之后，首先我们要使用行内元素（或设置display: inline;的其他元素）来承载文本内容。因为行内元素具有一个重要的特性：元素的宽度和高度由其内容决定，当文本内容换行时，从布局角度看，每个换行后的文本片段会被视为单独的内联内容部分，而不是一个整体的块级元素那样有明确的整体宽度和高度概念。这一点特性，在后面通过背景实现下划线效果时将会起到关键作用。

④ 接下来思考应该如何设置背景属性。目标效果中下划线是纯色的，首先想到的应该是设置背景颜色，但这种想法是错误的。因为设置背景颜色会直接应用到整个行内元素内容区域，而不是对每行的内联文本片段进行单独设置，且无法控制尺寸和位置。但如果给行内元素设置的背景图片，则会基于每行的内联文本片段来进行处理，而非整体内容区域，并且可以通过 background-size 和 background-position 属性进行精确控制。简单来说：我们给换行的行内元素设置背景图片时，其实际效果并非给整个内容块设置背景，而是给每行的内联文本片段设置背景。

⑤ 经过前面四步的思考，我们已经明确了实现目标效果的关键，接下来只需按部就班设置相关样式即可。首先通过linear-gradient生成一张纯色图片作为元素的背景图片，并设置为不允许重复；其次设置background-size属性，设置初始宽高，使其看起来为一条线；然后通过background-position将背景定位在元素底部，变为下划线。此时查看页面样式，发现每行文本底部的下划线效果已经实现。

⑥ 最后我们实现平滑动画效果。首先设置background-size属性，将初始宽度设置为0，将背景隐藏；然后在元素hover的时候，将背景宽度恢复为100%，显示背景；再然后借助transition属性，实现平滑的过渡效果，使得背景能逐行动态平滑的显示。

2、具体代码

HTML：

<div class="title-box">
  <span>
      有志者，事竟成。破釜沉舟，百二秦关终属楚。苦心人，天不负。卧薪尝胆，三千越甲可吞吴。有志者，事竟成。破釜沉舟，百二秦关终属楚。苦心人，天不负。卧薪尝胆，三千越甲可吞吴。
  </span>
</div>

CSS：

    .title-box {
      /* 父级盒子设置宽度 限制内部文本宽度 使其换行 */
      width: 336px;
      margin: 50px auto;
    }

    .title-box span {
      color: #333;
      /* 通过渐变设置图片背景 且不允许重复 */
      background: linear-gradient(to right, #333, #333) no-repeat;
      /* 背景初始宽度为0 高度为2px */
      background-size: 0 2px;
      /* 背景位置在文字底部 */
      background-position: left bottom;
      /* 设置平滑过渡效果 */
      transition: background-size 1.5s ease-in-out;
      cursor: pointer;
    }

    /* hover时触发动画 */
    .title-box span:hover {
      /* 背景宽度变为100% 高度不变 */
      background-size: 100% 2px;
      /* 可以通过改变背景位置 改变下划线出现和消失的方向 */
      /* background-position: right bottom; */
    }