css渐变实现多行文本下划线动画

weixin_34021089

于 2019-01-07 09:36:59 发布

阅读量1.1k

点赞数 1

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5c26e276f265da61290a40d9

本文介绍如何使用CSS为多行文本创建一个鼠标悬停时显示的下划线动画效果。通过HTML和CSS代码实现，当鼠标移到文本上时，下划线优雅地出现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

给多行文本做一个鼠标移动上去,加一个下划线动画.

html

 <h1 class="title">
    <span class="line-hover">使用 CSS Grid(网格) 布局来创建一个超酷的图像网格，它会根据屏幕的宽度改变列的数量，以实现响应式布局。</span>
</h1>

复制代码

css

.title{
        width: 40vw;
        margin: 0 auto;
        line-height: 1.5;
        color: #333;
        font-size: 2vw;
      }
      .line-hover{
         background-image: linear-gradient(#f00 0%, #f00 100%);
         background-repeat: no-repeat;
          background-size: 0px 2px;
          background-position: 0px 95%;
          transition: background-size 0.25s;
          padding: 0.1% 0px;

      }
      .title:hover .line-hover{
        background-size: 100% 2px;
         transition: background-size 0.25s ;
      }
复制代码