Question

有没有办法在CSS3过渡时获得悬停效果，例如Google Chrome网站（http://www.google.de/intl/de/chrome/browser/）上的效果？我的问题是，动画进入了错误的方向：

HTML：

<ul>
    <li>Nav#1</li>
    <li>Nav#2</li>
    <li>Nav#3</li>
</ul>

CSS：

ul{ list-style: none; }
ul li{
    float: left;
    padding: 25px;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}
ul li:hover{ border-bottom: 5px red solid; }

http://jsfiddle.net/HMZKP/

Answer 1

如果在底部处于正常状态时应用填充，则在悬停时移除该填充以获得所需效果。

ul li {
    float: left;
    padding: 25px;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
    border-bottom: 0;
    padding-bottom: 5px;
}

ul li:hover { 
    border-bottom: 5px red solid; 
    padding-bottom: 0; 
}

请参阅此jsfiddle：http://jsfiddle.net/xTjXK/（在Chrome，Firefox和Safari中测试）

像谷歌Chrome网站一样的CSS3过渡导航

1 个答案: