字体大小在悬停时会发抖

Question

此我的代码：

First，我要使第二个tex比第一个文本增加更多（第一个文本的font-size可以为20px，第二个文本的font-size可以为100px，仅一个例子。）

也当我使用此代码时，这些单词在“摇晃”。你看到了吗？

如何使用此代码执行这两件事？

谢谢

.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>