文字下划线

效果

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias aliquam, amet aspernatur, consequuntur cupiditate deleniti excepturi illum laudantium molestias natus recusandae rem rerum, soluta tempora ullam velit vitae voluptatem voluptates!

重点

设计思路：

1. 文字内容通常是放在行盒内的，因此应用文字相关动画需要设置能随行盒变化的样式，background 就可以随行盒变化。
2. 鼠标移入时，下划线是从左到右，因此设置过度效果时为 background-size 宽度从 0 到 100%
3. 鼠标移出时，正常情况是下划线从右到左消失，而上面效果仍是从左到右消失，分析原因：
   • 变化量：有且只有background-size
   • 方向：background-position, 默认是 left bottom 左下，当变化量增长时，下划线是从左到右移动。 变化量减少时，下划线是从右到左移动。 如果设置为 right bottom 右下，当变化量增长时，下划线是从右往左移动，对应的，变化量减少时下划线是从左到右移动的。
4. 设置过度效果时，当悬浮时设置方向为 left bottom， 当取消悬浮时设置方向为： right bottom

其实我们此处可以拿中学学的向量做类比，向量是包含字面量和方向的； 而过度动画中，我们改变的是字面量，方向如果我们不进行修改，则是按照之前过度动画运行方向的反方向运行，我们也可以在事件监听中修改其方向

代码

html

<div class="text-underline pointer-select">
    <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias aliquam, amet aspernatur, consequuntur cupiditate deleniti excepturi illum laudantium molestias natus recusandae rem rerum, soluta tempora ullam velit vitae voluptatem voluptates!</span>
</div>

css

.text-underline
  width 600px
  font-size 26px
  line-height 1.5

  & > span
    background linear-gradient(to right, #1aee44, #e2a5a4) no-repeat
    background-size 0 2px
    background-position right bottom
    transition background-size 1s

  &:hover span
    background-size 100% 2px
    background-position left bottom