CSS Transition 字体大小:避免抖动/摆动

新手上路,请多包涵

我制作了以下图块,具有增加 font-size 和 CSS- transition 的悬停效果:

 body {
  font-family: 'Segoe UI', sans-serif;
}
.website {
  width: 180px;
  height: 73px;
  text-align: center;
  line-height: 80px;
  margin: 1px;
  color: white;
  border-bottom: 5px solid darkslateblue;
  background-color: darkslateblue;
  white-space: nowrap;
  overflow: hidden;
  transition: border-color 0.66s ease-out, font-size 0.3s ease-out;
}
.website:hover {
  font-size: 16pt;
  cursor: pointer;
  transition: border-color 0s;
  border-color: black;
}
 <div class="website">Blog 1</div>
<div class="website">Blog 2</div>
<div class="website">Blog 3</div>

当您悬停它们时,您可以看到 font-size 的过渡一点也不平滑。换句话说,它在改变大小时上下摆动。

有没有人知道如何修复或解决它?

原文由 CoderPi 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 1.6k
2 个回答

您可以使用 CSS transform:scale 来实现更平滑的过渡,如下所示:

 .website:hover {
  cursor: pointer;
  transition: border-color 0.4s;
  border-color: black;
}
.website div {
  transition: transform 0.3s ease-out;
}
.website:hover div {
  transform: scale(1.5);
  transition: transform 0s;
}

这是 JSFiddle 演示

另请注意,我在 div 中添加了文本,缩放是在 div 上完成的,这样 整个 框就不会缩放 :)

原文由 Ahs N 发布,翻译遵循 CC BY-SA 3.0 许可协议

悬停放置 transition: border-color 0s, font-size 0.3s ease-out;

因为在悬停时 transition: border-color 0s 只会给 border-color 过渡不会给 font-size

 body {
  font-family: 'Segoe UI', sans-serif;
}
.website {
  width: 180px;
  height: 73px;
  text-align: center;
  line-height: 80px;
  margin: 1px;
  color: white;
  border-bottom: 5px solid darkslateblue;
  background-color: darkslateblue;
  white-space: nowrap;
  overflow: hidden;
  transition: border-color 0.66s ease-out, font-size 0.3s ease-out;
}
.website:hover {
  font-size: 16pt;
  cursor: pointer;
  transition: border-color 0s, font-size 0.3s ease-out;
  border-color: black;
}
 <div class="website">Blog 1</div>
<div class="website">Blog 2</div>
<div class="website">Blog 3</div>

原文由 ketan 发布,翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题