javascript - 动画边框底部的长度

Question

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

我尝试在 stackoverflow 和 google 上查找类似的问题，但没有发现任何有用的信息。

非常感谢任何帮助。

Answer 1

嗯，这就像使用开发人员工具检查网络一样简单。他们在该页面中所做的就是使用 :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);
}