CSS - 上边框过渡工作不细

的CSS代码：CSS - 上边框过渡工作不细

.css3_nudge ul li a { 
    -webkit-transition-property: color, background-color, padding-left, border-right; 
    -webkit-transition-duration: 400ms, 400ms, 400ms, 400ms; 
} 

.css3_nudge ul li a:hover { 
    background-color: #efefef; 
    color: #333; 
    padding-left: 50px; 
    border-right: 1px solid red; 
}

的HTML代码：

<div class="css3_nudge nudge"> 
    <ul> 
     <li><a href="#" title="Home">Home</a></li> 
     <li><a href="#" title="Blog">Blog</a></li> 
     <li><a href="#" title="About">About</a></li> 
     <li><a href="#" title="Register">Register</a></li> 
     <li><a href="#" title="Contact">Contact</a></li> 
    </ul> 
</div>

的过渡所有元素，但边框做工精细，它只是出现在末尾400ms，对边界没有影响。

我想要达到的效果就像新的谷歌Gmail邮件按钮。

预先感谢任何帮助

来源

2011-07-11 Gerep

我在Gmail的按钮上看不到动画。由于他们以A-B测试而闻名，因此向我们提供您正在谈论的动画或视频可能是一个好主意。 – Shauna

当你的光标在按钮上时，你会看到它......新主题 – Gerep

正如我所说，在我的版本中没有动画，即使在悬停时也是如此。 Google已知可以进行A-B测试，这意味着不同的用户会看到不同版本的网站，而用户甚至不知道其他网站的存在。该公司将其用于比较目的。 – Shauna

这是一个非常简单的解决。在悬停效果之前，您只需要一个边框即可。所以刚才设置的border-right: 1px solid #fff;象下面这样：

.css3_nudge ul li a { 
    -webkit-transition-property: color, background-color, padding-left, border-right; 
    -webkit-transition-duration: 400ms, 400ms, 400ms, 400ms; 
    border-right: 1px solid #fff; /* added property */ 
}

则切换有效地只是改变了边框的颜色，而不是创建一个边界。

来源

2011-07-11 15:36:30 tw16

伟大的解决方案=） – Gerep

只是想为任何人绊倒这一点，你可能会更好地设置边框颜色为“透明”，无需担心颜色管理它，特别是如果它在共享样式。 –

@NathanHornby：+1为边框透明。谢谢。 – rsharpy

CSS - 上边框过渡工作不细

回答

相关问题