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

这是我的代码。

第一我想让第二个文本比第一个文本增加更多的文字(即 font-size20pxfont-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>
    

解决方案:

你应该使用 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>

给TA打赏
共{{data.count}}人
人已打赏
未分类

NodeJs中的Passport总是返回UnAuthorized。

2022-9-8 7:20:35

未分类

在VBScript中搜索字符串以验证单词的问题[重复]。

2022-9-8 7:20:37

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索