悬停时字体大小变得不稳定

Question

这是我的代码：

首先，我想让第二个tex比第一个文本增加更多(第一个的font-size可以是20px，第二个的font-size可以是100px，这只是一个例子。(

此外当我使用此代码时，单词是"shaking"。你能看到这个吗？

如何使用此代码完成这两件事？

谢谢

.ilustration h1 {
/* border: 1px solid red; */
text-align: center;
font-size: 54px;
font-weight: lighter;
color: transparent;
background-color: green;
}
.ilustration h1:hover {
color: white;
opacity: 1;
transition: 1s;
font-weight: 100;
font-style: oblique;
font-size: 70px;
background-color: black;
}

<div class="ilustration">
<h1 class="hover_effect">
First Text <br />
<span class="cor">Second Text</span>
</h1>
</div>

Answer 1

您应该使用transition: transform 1s;和transform: scale(1.5);进行平滑过渡

同样，不稳定的事情取决于多个因素，如font-size, font-family等。悬停浏览器往往与动态字体大小匹配，所以你必须四处寻找，以获得准确的匹配，而不是不稳定的功能。

和

要在同一父级中使用不同的字体大小，您可以执行以下操作：

.ilustration:hover h1 {...}
.ilustration:hover span {...}

以下是两个问题的答案：

.ilustration h1 {
/* border: 1px solid red; */
text-align: center;
font-size: 54px;
font-weight: lighter;
color: transparent;
}
.ilustration:hover h1 {
color: white;
font-weight: 100;
font-style: oblique;
font-size: 70px;
background-color: black;
transform: scale(1.5);
opacity: 1;
transition: transform 1s;
}
.ilustration:hover span {
color: white;
font-weight: 100;
font-style: oblique;
font-size: 120px;
background-color: black;
transform: scale(1.5);
opacity: 1;
transition: transform 1s;
}

<div class="ilustration">
<h1 class="hover_effect">
First Text <br />
<span class="cor">Second Text</span>
</h1>
</div>