【日常记录】【CSS】css下划线动画

news2024/12/22 22:49:46

文章目录

- 1、效果
- 2、思路
- 3、代码

1、效果

在这里插入图片描述

2、思路

整体可以用 背景来做
线：可以用 渐变 配合 background-size 、 background-position 、background-repeat
正向动画：可以不断追加 background-size x 轴的大小来控制，当鼠标移入的时候，不断追加 background-size X轴大小
反向动画：可以在鼠标移出的时候，吧 background-position 的 x 轴设置成 right ，先从右边体现

3、代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .underline {
      line-height: 2;
      background: linear-gradient(to right, red, red);
      background-size: 0 2px;
      background-repeat: no-repeat;
      background-position: right bottom;
      transition: background-size 0.8s;
    }

    div span:hover {
      background-position: left bottom;
      background-size: 100% 2px;
    }
  </style>
</head>

<body>
  <div>
    <span class="underline">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem alias accusamus maxime exercitationem fugit
      repudiandae a quaerat in sint aliquid officiis, minima, illo, molestias repellendus sequi? Dolores quisquam
      architecto
      aliquam.Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem alias accusamus maxime exercitationem
      fugit
      repudiandae a quaerat in sint aliquid officiis, minima, illo, molestias repellendus sequi? Dolores quisquam
      architecto
      aliquam.Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem alias accusamus maxime exercitationem
      fugit
      repudiandae a quaerat in sint aliquid officiis, minima, illo, molestias repellendus sequi? Dolores quisquam
      architecto
      aliquam.
    </span>
  </div>
</body>

</html>