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>
过渡对于除边框之外的所有元素都工作正常,它只出现在 400 毫秒的末尾,对边框没有影响。
我想要实现的是类似于新的 google gmail 按钮的效果。
在此先感谢您的帮助
最佳答案
这是一个非常简单的修复。您只需要在悬停效果之前就已经存在边框。所以只需设置 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 */
}
然后过渡实际上只是更改边框的颜色而不是创建边框。
关于CSS - 边框过渡效果不佳,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6652423/