记录一下之前一直感觉很不错的 菜单移入效果。就是当鼠标移入后 下滑线向两边缓慢延展的效果
实现这个功能 主要是使用了伪类元素 :befor :after
核心代码是:
html
<p class="navP">管理</p>
css中
.navP {
width: 150px;
position: relative;
height: 58px;
line-height: 58px;
cursor: pointer;
background-color: #545c64;
}
.navP:before,.navP:after{
content: '';
width: 0;
height: 2px;
background-color:#ffd04b;
position: absolute;
top: 100%;
left: 50%;
transition: all 0.8s;
}
.navP:hover:before{
width:50%;
left:0px;
}
.navP:hover:after{
width:50%;
right:0px;
}
就是首先先将伪类元素定位到元素的中间位置,在 鼠标移入后给伪类元素添加宽度 和位置 这样就transition过渡的时候就可以展现出比较好的效果了。