css 下划线动画

css下划线动画，从左进入右边滑出，快来为你的文本增加一抹有趣的选中效果吧

CSS 下划线动画

效果：

思路：

1. 使用背景即Background来实现，背景能跟随内容的宽度变化而发生变化。

2. 线条的实现 - 使用线性渐变既linear-gradient，来绘制线条。

3. 位置和动画的实现，使用背景定位(background-position)控制背景的X轴和Y轴位置，使用背景大小(background-size)控制背景的高度和宽度，在hover时动态修改背景的宽度既能实现线条从0-100%。

实现过程：

首先准备一个包裹文本的span标签，注意如果使用div等块级元素，则无法实现下划线跟随全文的效果。

目前鼠标移入到文本内容时，处修改指针样式外，无其它改变。

使用线性渐变，绘制下划线，给span标签添加如下样式。

/* 线性渐变(从左到右, 填充色, 填充色) x轴定位靠右 y轴定位靠下 背景不重复 */
background: linear-gradient(to right, #1890ff, #1890ff) right bottom no-repeat;
/* 宽度 高度 */
background-size: 100% 1px;

此时效果为：

实现动画效果，开头进尾部出，把背景宽度修改为0%，并给span添加hover，在hover时修改背景宽度为100%，背景定位为X轴修改为left 靠左。

        .txt{
            cursor: pointer;
            /* 线性渐变(从左到右, 填充色, 填充色) x轴定位靠左 y轴定位靠下 背景不重复 */
            background: linear-gradient(to right, #1890ff, #1890ff) right bottom no-repeat;
            /* 宽度 高度 */
            background-size: 0% 1px;
            /* 动画只对背景宽度生效 过渡时间为0.8秒 */
            transition: background-size .8s;
        }
        /* 鼠标移入时 */
        .txt:hover{
            /* 宽度100% 高度1px */
            background-size: 100% 1px;
            /* 背景x轴靠左 */
            background-position-x: left;
        }

此时效果完成，鼠标移入时从文本开头进入渐渐铺满至文本结尾，鼠标移出时，从开头慢慢变小并失踪靠文本尾部，造成从尾部滑出的效果。

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 900px;
            margin: 100px auto;
        }
        .txt{
            cursor: pointer;
            /* 线性渐变(从左到右, 填充色, 填充色) x轴定位靠左 y轴定位靠下 背景不重复 */
            background: linear-gradient(to right, #1890ff, #1890ff) right bottom no-repeat;
            /* 宽度 高度 */
            background-size: 0% 1px;
            /* 动画只对背景宽度生效 过渡时间为0.8秒 */
            transition: background-size .8s;
        }
        .txt:hover{
            /* 宽度100% 高度1px */
            background-size: 100% 1px;
            /* 背景x轴靠左 */
            background-position-x: left;
        }
    </style>
</head>
<body>
    <div class="box">
        <span class="txt">
            轻轻的我走了，正如我轻轻的来；
            我轻轻的招手，作别西天的云彩。
            那河畔的金柳，是夕阳中的新娘；
            波光里的艳影，在我的心头荡漾。
            软泥上的青荇，油油的在水底招摇；
            在康河的柔波里，我甘心做一条水草！
            那榆荫下的一潭，不是清泉，
            是天上虹揉碎在浮藻间，
            沉淀着彩虹似的梦。
        </span>
    </div>
</body>
</html>