Question

我希望有一个漂亮的悬停效果，我会略微缩放列表项的宽度。

我也想用250ms的动画延迟来做这件事。问题是文本被拉伸和闪烁。

如何抵消这种影响？

我有一个显示问题的jsFiddle。这是Chrome中最引人注目的。

示例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在评论中提到的那样，你不应该使用scale，因为它按照定义拉伸了元素。相反，您可以添加更多左/右填充以使元素更宽。一个问题是元素将被推到右边，你可以通过在其包装器中添加“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”。

如何在元素上使用CSS3变换而不拉伸其中的文本？

1 个答案: