鼠标滑动 边框底部特效

前端领域当中，页面特效是一个既熟悉又好玩的一个操作点，今天在项目中用到了边框底部特效，直接上效果代码（CSS使用的是scss）

 

 

 

 

HTML代码

 

<ul>

<li><span>首页</span></li>

</ul>

CSS代码：

        ul{
                display: flex;
                li{
                    cursor: pointer;
                    list-style: none;
                    float: left;
                    flex: 1;
                    padding: 10px 15px;
                    line-height: 60px;
                    span{
                        position: relative;
                        line-height: 40px;
                        height: 40px;
                        display: inline-block;
                    }
                    span::before {
                        content: "";
                        position: absolute;
                        width: 100%;
                        height: 2px;
                        bottom: 0;
                        left: 0;
                        background: #B5AA9A;
                        visibility: hidden;
                        transform: scaleX(0);
                        transition:  all 0.2s ease-in 0s;
                    }
                    span:hover::before {
                        visibility: visible;
                        transform: scaleX(1);
                    }
                }
            }
        }

 关于transition学习 ： transition 学习