动画边框底部的长度

2022-01-22 00:00:00 hover jquery javascript css

我有一个导航栏.在悬停任何菜单项时，我希望获得与 here(查看左上角的边框或菜单项在悬停时的动画效果.)

I have a navbar. On hover of any of it menu item I want to have the exact same effect of border-bottom animation as in here (See how the border or menu items at the top-left animates when you hover them.)

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

I tried to find similar asked questions on stackoverflow and also on google but I didn't find anything helpful.

非常感谢任何帮助.

推荐答案

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

Well, it was as easy as inspecting the web with the developer tools. What they do in that page is to create an element inside the menu using the :before pseudo-element. On hover they use CSS transforms (scale) to change the length.

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);
}

相关文章