Question

我有一个内部跨度带文字的div。这个内部跨度应始终垂直和水平居中：

<div>
    <span>Text aligned center</span>
</div>

当鼠标结束时，div会有一个过渡，它会改变它的宽度和高度。

div{
width:200px;
height:200px;
background:black;
position:relative;
-webkit-transition:width 10s,height 10s;
}
span {
position:absolute;
color:white;
bottom:0;
right:0;
}
div:hover{
width:250px;
height:250px;
}

然而，在Chrome（至少）中，文本在转换运行时看起来很不稳定。我想这是因为转换是1乘1px，因此＆＃34;中心风格＆＃34;必须重新前进1px。

有没有办法解决这个看起来更平滑，像子像素？感谢。

Answer 1

尝试将文本绝对居中..

span {
  margin: auto;
  color:white;
  text-align:center;
  height:10px;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

当然会降低你的过渡速度。

Answer 2

对跨度应用不同的更改。变换可以是子像素

div{
    width:200px;
    height:200px;
    background:black;
    position:relative;
    -webkit-transition:width 10s,height 10s;
}
span {
    position:absolute;
    color:white;
    top:75px;
    left:50px;
    width: 100px;
    transition: -webkit-transform 10s;
    -webkit-transform: translate(0px, 0px);
}
div:hover{
    width:250px;
    height:250px;
}

div:hover span {
    -webkit-transform: perspective(999px) translate(25px, 25px);
}

fiddle

转换运行时中心div看起来波涛汹涌

2 个答案: