CSS代码:
.css3_nudge ul li a { -webkit-transition-property: color,background-color,padding-left,border-right; -webkit-transition-duration: 400ms,400ms,400ms; } .css3_nudge ul li a:hover { background-color: #efefef; color: #333; padding-left: 50px; border-right: 1px solid red; }
<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按钮的效果.
在此先感谢您的帮助