css - 如何在不拉伸(stretch)其中文本的情况下对元素使用 CSS3 转换？

Question

我希望有一个很好的悬停效果，我稍微缩放列表项的宽度。

我还想用 250 毫秒的动画延迟来执行此操作。问题是文本会被拉伸(stretch)并闪烁。

如何抵消这种影响？

我有一个显示问题的 jsFiddle。它在 Chrome 中最为引人注目。

http://jsfiddle.net/LxywP/

示例 CSS:

span {
    display: inline-block;
    background: #eee;
    border: solid 1px #ddd;
    padding: 8px 10px;
    font-size: 1.2em;
    font-weight: bold;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    -moz-transition: all 250ms;
    -webkit-transition: all 250ms;
    -o-transition: all 250ms;
    transition: all 250ms;
}

span:hover { 
    background: darken(#E2F3E2, 8%);
    text-decoration: none; 
    -ms-transform: scale(1.05, 1);
    -mozilla-transform: scale(1.05, 1);
    -webkit-transform: scale(1.05, 1);
    transform: scale(1.05, 1);
}

Answer 1

正如@Spudley 在评论中提到的，您不应该使用缩放，因为它会根据定义拉伸(stretch)元素。相反，您可以添加更多的左/右填充以使元素更宽。一个问题是元素会被推到右边，你可以通过在它的包装器中添加“text-align: center”来解决这个问题。

HTML:

<div>
    <span>This text gets stretched</span>
</div>

CSS:

div {
    text-align: center;
}

span {
    display: inline-block;
    background: #eee;
    border: solid 1px #ddd;
    padding: 8px 10px;
    font-size: 1.2em;
    font-weight: bold;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    -moz-transition: padding 250ms;
    -webkit-transition: padding 250ms;
    -o-transition: padding 250ms;
    transition: padding 250ms;
}

span:hover { 
    background: darken(#E2F3E2, 8%);
    text-decoration: none; 
    padding: 8px 20px;
}

将它们粘贴到您的 jsfiddle 中并查看效果。

另一个专业提示是限制使用“transition: all”，指定特定属性以应用过渡可以大大提高性能。在这种情况下，您将使用“transition: padding”。