使用 CSS : 伪元素:after、过渡动画transition实现过渡效果(鼠标悬浮或点击 标签时,底部边框从左到右过渡)

发布时间:2024年01月09日

首先,给 <span> 标签添加一个父元素,定义属性类名:nav-wrapper ,父级设置相对定位。然后,使用 ::after 伪元素来创建一个与底部边框相同宽度的元素,初始时宽度为 0,通过过渡动画transition逐渐增加宽度,从而实现从左到右的过渡效果。

?<div class="nav-wrapper">

? ?  <span class="nav" :class="$route.fullPath === '/companyProducts' ? 'active' : ''">公司产品</span>

</div>

.nav-wrapper {
  position: relative;
}

.nav::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background-color: red;
  transition: width 0.3s ease;
}

.nav:hover::after,
.nav:focus::after {
  width: 100%;
}

//当前路由样式
.active {
        color: #cd1e19;
        font-weight: 700;

      }

文章来源:https://blog.csdn.net/xiaoming4965/article/details/135481246
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。