我希望鼠标悬停在上方时,字体大小随过渡而减小.但是,当鼠标悬停在鼠标上方时,它会闪烁.我想摆脱闪烁.

.big-box {
        display: flex;
    }
    .big-box span {
        font-size: 100px;
        transition-duration: 1s;
        white-space: pre;
    }
    .big-box span:hover {
        font-size: 50px;
    }
<div class="big-box">
  <span>I</span>
  <span>T</span>
  <span> </span>
  <span>I</span>
  <span>S</span>
  <span> </span>
  <span>T</span>
  <span>E</span>
  <span>X</span>
  <span>T</span>
</div>

推荐答案

更好的方法是使用scale而不是font-size,如下所示:

.big-box {
  display: flex;
}
.big-box span {
  font-size: 100px;
  transition-duration: 1s;
  white-space: pre;
}
.big-box span:hover {
  transform: scale(0.6);
}
<div class="big-box">
  <span>I</span>
  <span>T</span>
  <span> </span>
  <span>I</span>
  <span>S</span>
  <span> </span>
  <span>T</span>
  <span>E</span>
  <span>X</span>
  <span>T</span>
</div>

Javascript相关问答推荐

setcallback是什么时候放到macrotask队列上的?

JSDoc创建并从另一个文件导入类型

如何发送从REST Api收到的PNG数据响应

创建以键值对为有效负载的Redux Reducer时,基于键的类型检测

为什么JPG图像不能在VITE中导入以进行react ?

使用jQuery find()获取元素的属性

是否设置以JavaScript为背景的画布元素?

按特定顺序将4个数组组合在一起,按ID分组

JQuery使用选项填充HTMLSELECT并设置默认结果,默认结果显示为空

如何在Web项目中同步语音合成和文本 colored颜色 更改

在此div中添加一个类,并在一段时间后在Java脚本中将其删除

使用Java脚本在div中创建新的span标记

面临错误:未捕获RangeError-超出最大调用堆栈大小

检索绰号及其串中的花数,JS

如果用户的页面宽度低于某个阈值,如何使用js更改html页面中的css文件

需要将源自AJAX的数据添加到表中

如何遍历数组并在json中添加字段

根据选定内容或设置编号将项目添加到数组

在p5.js中,2D数组位图读取器不支持同一行中的重复 colored颜色

有没有办法让动画在中止时结束?