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

Question

这是我的代码：

第一个，我想让第二个tex比第一个文本增加更多（第一个的font-size可以20px和[=第二个的12=]可能是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); 来平滑过渡

Again the shaky thing depends on multiple factor like, font-size, font-family etc.. on hover browser tends to match the dynamic font size, so you have to play around to get the exact match not to get shaky feature.

和

To have different font size which are within same parent then you can do something like:

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

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

font size getting shaky on hover

css

razor

css-transitions