边界底部的动画长度

Question

我有一个导航栏.在悬停任何菜单项时,我希望获得与此处相同的边框底部动画效果(请参阅悬停它们时左上角的边框或菜单项的动画效果.)

我试图在stackoverflow和谷歌上找到类似的问题,但我没有找到任何有用的东西.

任何帮助都非常感谢.

Answer 1

嗯,就像使用开发人员工具检查Web一样简单.他们在该页面中所做的是使用:before伪元素在菜单中创建一个元素.在悬停时,他们使用CSS变换(缩放)来改变长度.

jsfiddle.

span
{
    display: inline-block;
    padding: 6px 0px 4px;
    margin: 0px 8px 0px;
    position: relative;
}

span:before
{
    content: '';
    position: absolute;
    width: 100%;
    height: 0px;
    border-bottom: 1px solid black;
    bottom: 2px;
    -webkit-transform: scaleX(0);
    -ms-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transition: -webkit-transform 0.2s ease-in;
    transition: transform 0.2s ease-in;
}

span:hover:before
{
    -webkit-transform: scaleX(1);
    -ms-transform: scaleX(1);
    transform: scaleX(1);
}

Answer 2

边框的边长不能与边框的长度不同.但是,只使用CSS就可以实现类似的效果 - 使用伪元素.如下所示:

div:after{
    position:absolute;
    bottom:0;
    left:50%;
    height:1px;
    width:0%;
    background-color:#444;
    display:block;
    content:'';
    transition:0.3s;
}

div:hover:after{
    left:0;
    width:100%;
}

的jsfiddle