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

Bertha 。 2024-03-23 20:43 12阅读 0赞

先看效果：

![ae46f79134294d9c8e779b00f17fd3f3.gif][]

这个效果很简单，被**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>

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

[ae46f79134294d9c8e779b00f17fd3f3.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/6ac36dd74aec44ab923cdab38db01376.png