如何在水平Nav项目下方从左到右动画边框 [英] How to Animate a Border Below a Horizontal Nav Item from Left to Right

问题描述

Id喜欢在水平导航中从左到右动画制作边框，悬停。我所能找到的最接近的例子是： http://css-tricks.com/例子/ MagicLine / ，但它不是什么im寻找。

Id like to animate a border in a horizontal navigation from left to right on hover. The closest example I have been able to find is the one here: http://css-tricks.com/examples/MagicLine/ but its not what im looking for.

我只是想悬停，并有一个下划线只是从左到右绘制。

I just want to hover and have an underline simply draw from left to right.

感谢任何建议。

推荐答案

<div class="menuitem">
    Menu Item
    <span></span>
</div>

CSS：

.menuitem {
    position: relative;
    display: inline-block;
    width: 80px;
    height: 32px;
    text-align: center;
    background: #FFE;
    cursor: pointer;
}
.menuitem span {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 3px;
    background: #000;
    transition: all 0.6s;
}
.menuitem:hover span {
    width: 100%;
}

http://jsfiddle.net/samliew/QUMgy/

http://jsfiddle.net/samliew/QUMgy/

这篇关于如何在水平Nav项目下方从左到右动画边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！