Question

我有一个导航栏。在悬停任何菜单项时，我希望获得与here中完全相同的边框底部动画效果（当您将它们悬停时，查看左上角的边框或菜单项的动画效果。）

我试图在stackoverflow和谷歌上找到类似的问题，但我没有找到任何帮助。

非常感谢任何帮助。

Answer 1

嗯，就像使用开发人员工具检查网页一样简单。他们在该页面中所做的是使用:before伪元素在菜单中创建一个元素。在悬停时，他们使用CSS变换（比例）来改变长度。

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

Answer 3

它不是边界底部，它是使用css伪元素:before

完成的

.navigation li a::before {
    position: absolute;
    bottom: -1px;
    left: 0;
    content: "";
    width: 100%;
    height: 1px;
    background-color: #fff;
    display: block;
    -webkit-transition: all 0.2s ease-in-out 0s;
    -moz-transition: all 0.2s ease-in-out 0s;
    transition: all 0.2s ease-in-out 0s;
    -webkit-transform: scaleX(0);
    -moz-transform: scaleX(0);
    transform: scaleX(0);
}

.navigation li a::before {
    -webkit-transform: scaleX(1);
    -moz-transform: scaleX(1);
    transform: scaleX(1);
}

边界底部的动画长度

3 个答案: