文本大小的CSS平滑过渡[重复]答案

【问题标题】：CSS smooth transitions for text size [duplicate]文本大小的CSS平滑过渡[重复]
【发布时间】：2021-02-12 06:37:16
【问题描述】：

对于悬停时尺寸增加的元素 (CSS)，我能否确保该元素中包含的文本不会也增加尺寸？

或者，我能否确保过渡比我在 Windows 上的 Chrome（版本 88.0.4324.150）中看到的要平滑得多？当文本变大时，文本看起来很模糊。

.panel {
    width: 400px;
    height: 250px;
    color: #fff;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    transition: all .5s 0s ease;
    list-style-type: none;
}
.panel:focus, .panel:hover {
    transform: scale(1.03);
}
.panel-link {
    color: #fff;
    width: 100%;
    height: 100%;
    display: inline-block;
    padding: 30px;
}
.panel-text {
    text-transform: uppercase;
    font-size: 2rem;
}

<li class="panel" style="background-image: linear-gradient(to bottom, rgba(21, 21, 21, 0), rgba(21, 21, 21, 0.7)), url('https://herodevelopment.com.au/allbathroomgear/wp-content/uploads/2021/02/bathroom.jpg')">
    <a href="http://herodevelopment.com.au/allbathroomgear/design-build/bathrooms/" title="Bathrooms" class="panel-link">
    <span class="panel-text">Bathrooms</span>
  </a>
</li>

【问题讨论】：

标签： css css-transitions

【解决方案1】：

只需确定面板内的文本大小而不是跨度，并根据比例更改它，在此示例中，要使文本保持相同大小，它必须是 2/1.03=1.94rem。

对于您的第二个问题，唯一的方法是使用抗锯齿，但它对像这样的缩放和转换没有影响。

另一种更好的方法是在 li 中使用图像元素，并仅缩放图像，这样图像只会缩放或缩放，文本不会改变大小，因此保持平滑而不模糊。

.panel {

    width: 400px;
    height: 250px;
    color: #fff;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    transition: all .5s 0s ease;
    list-style-type: none;
    font-size: 2rem;
}
.panel:not(span):focus, .panel:not(span):hover {
    transform: scale(1.03);
    font-size: 1.94rem;
}
.panel-link {
    color: #fff;
    width: 100%;
    height: 100%;
    display: inline-block;
    padding: 30px;
}
.panel-text {
    text-transform: uppercase;
    
}

<li class="panel" style="background-image: linear-gradient(to bottom, rgba(21, 21, 21, 0), rgba(21, 21, 21, 0.7)), url('https://herodevelopment.com.au/allbathroomgear/wp-content/uploads/2021/02/bathroom.jpg')">
    <a href="http://herodevelopment.com.au/allbathroomgear/design-build/bathrooms/" title="Bathrooms" class="panel-link">
    <span class="panel-text">Bathrooms</span>
  </a>
</li>

【讨论】：