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 - 上邊框過渡工作不細

回答

相關問題