CSS：文字下方亮条穿梭效果

先看效果：

 这个效果很简单，被h元素包裹起来的文字，下方增加了一个动态的穿梭亮条，当鼠标移入到html元素区域时，亮条从左至右依次显现出来；鼠标悬停在元素上时，亮条保持不变；当鼠标移出元素区域时，亮条需要从左至右依次消失。

看起来是不是有点高端、大气、上档次，这种效果其实和功能无关，但可以增加你页面设计的高级感，让人觉得你对于产品设计有独特的理解和更高的质量追求。

其实这个效果实现起来非常简单，简单到只需要css就可以实现啦。想必大家都能猜到，这肯定是通过css鼠标事件来实现的，没错，就是hover，但亮条如何创建出来，又如何让他按照你定义的轨迹运动，就稍微有一点小技巧在里面啦。

不卖关子，直接上源码，不多做解释，因为代码实在是太少、太简单啦，相信大家看一下就恍然大悟，原来如此简单：

<template>
  <div class="home">
    <h2 class="yaken">
      <span>欢迎使用，yaken java 通用权限系统 ！</span>
    </h2>
  </div>

</template>

<script/>

<style lang="scss" scoped>

.home{
  padding: 40px;
  font-size: 30px;
  font-weight: bold;
}

.yaken {
  color: blue;
  line-height: 2;
}

//文字下方灯条穿梭效果
.yaken span {
  background: linear-gradient(to right, #ec695c,#61c454) no-repeat right bottom;
  background-size: 0 2px;
  transition: background-size 1000ms;
}

.yaken span:hover{
  background-position-x: left;
  background-size: 100% 2px;
}

</style>

各位快去试试吧，给自己的页面也添加一些类似这样的效果。