размер шрифта становится шатким при наведении - PullRequest
Новая
       6

размер шрифта становится шатким при наведении

1 голос
/ 23 апреля 2020

Это мой код:

Первый , я хочу, чтобы второй текст увеличился больше, чем первый текст (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>

1 Ответ

2 голосов
/ 23 апреля 2020

вы должны использовать transition: transform 1s; и transform: scale(1.5); для плавного перехода

Опять шаткая вещь зависит от множества факторов, таких как font-size, font-family et c .. при наведении курсора имеет тенденцию совпадать размер шрифта Dynami c, поэтому вам нужно поиграть, чтобы получить точное совпадение, чтобы не получить шаткую особенность.

и

Чтобы иметь другой размер шрифта, который находятся в пределах одного и того же родителя, тогда вы можете сделать что-то вроде: 

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