鼠标移入时下划线向两边展开的效果

记录一下之前一直感觉很不错的 菜单移入效果。就是当鼠标移入后 下滑线向两边缓慢延展的效果

实现这个功能 主要是使用了伪类元素 :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过渡的时候就可以展现出比较好的效果了。

评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值