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

2024-03-20 12:46:01
开发
38

文章目录

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>

原文地址:https://blog.csdn.net/qq_45634593/article/details/136763933 本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：https://www.suanlizi.com/kf/1770310804411912192.html 如若内容造成侵权/违法违规/事实不符，请联系《酸梨子》网邮箱：1419361763@qq.com进行投诉反馈，一经查实，立即删除！

阅读全部

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

文章目录

1、效果

2、思路

3、代码

相关推荐

最近更新

热门阅读