tag标签动态下横线效果

使用CSS动画-animation实现该效果
animation可以设置多个节点精确控制一个或一组动画常用来实现复杂的动画效果
@keyframes定义动画
从宽度0像素白色变为宽度74px蓝色

@keyframes demo{
  from{width: 0px;background-color: rgb(235,248,250);}
  to{width: 74px;background-color: rgb(0,82,217)}
}

html

<div class="categories">
      <span
        class="tag"
        :class="{ 'active': activeCategory=== item }"
      >{{ item }}
      </span>
    </div>

CSS
after伪类

.tag::after {
      position: absolute;
      content: '';
      width: 65px;
      height: 5px;
      margin-top:32px;
      border-radius: 3px;
      background-color: rgb(250, 251, 253);
      color: rgb(17, 16, 16);
      font-weight: bold;
    }

鼠标悬停时
0.25S分24步完成从宽度0像素白色变为宽度74px蓝色
24帧-30帧即可实现不卡顿的动画效果所以24步完成

js.tag-category:hover::after{
      animation: demo 0.25s steps(24) forwards;
    }

实现效果