CSS真的是太神奇了，技巧真的是太多了

偶然看到了渡一老师的视频，收益匪浅，决定在这里记录一下

由于不能上传视频，我描述一下效果。这里文字的下划线是鼠标移动上去，从句子开始到句子结尾平滑过渡展示出来的，鼠标移出是从句子开始平滑过渡消失的。

话不多说，上代码。

   <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
          .title {
            width: 30%;
            color: #333;
            line-height: 2;
            font-size: 50px;
          }
          .title span {
            background: linear-gradient(to right, #e20000, #03ab00) no-repeat right
              bottom;
            background-size: 0 4px;
            transition: background-size 1300ms;
          }
          .title span:hover {
            background-position-x: left;
            background-size: 100% 4px;
          }
        </style>
      </head>
      <body>
        <h2 class="title">
          <span>十年后，你会发现CSS才是你永远也学不会的语言</span>
        </h2>
      </body>
    </html>

最终实现效果

CSS的奇思妙用

CSS真的是太神奇了，技巧真的是太多了