tag标签动态下横线效果

wb wb | 217 | 2022-12-26

使用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;
    }

实现效果
629791ee803945f19a48d1d60d5eef92

文章标签: vuecsshtml
推荐指数:

真诚点赞 诚不我欺~

tag标签动态下横线效果

点赞 收藏 评论