动画底边的长度 [英] Animate LENGTH of border-bottom

问题描述

我有一个导航栏.悬停在任何菜单项上时，我都希望具有与此处a>(查看将鼠标悬停在左上角的边框或菜单项的动画效果).

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和google上找到类似的问题，但没有发现任何帮助.

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

我们非常感谢您的帮助.

Any help is really appreciated.

推荐答案

好，就像使用开发人员工具检查网络一样容易.他们在该页面中执行的操作是使用: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);
}

这篇关于动画底边的长度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！