Question

我制作了以下磁贴，其悬停效果会使用CSS增加font-size - 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的转换根本不平滑。换句话说，它在改变尺寸时会上下摆动有没有人有一个想法如何解决或解决它？

Answer 1

您可以使用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;
}

Here is the JSFiddle demo

另请注意，我在div中添加了文字，并在div上完成了缩放，因此整个框不会缩放：）

Answer 2

悬停时放redirectNative("FAIL")

因为在悬停时transition: border-color 0s, font-size 0.3s ease-out;仅提供transition: border-color 0s转换而不是border-color。

＆＃13;

font-size

＆＃13;

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;
}

＆＃13;

Answer 3

最初，我使用的是 font-family: "Helvetica", sans-serif; 它像地震动画一样摇晃。（div 中的一些测试很顺利，有些则不是。不一致和随机）。后来，我做了一些改变。

`@import url('https://fonts.googleapis.com/css2family=Poppins:wght@300&display=swap');

body {
    font-family: "Poppins", sans-serif;
}`

现在，动画（尤其是字体大小动画）很流畅。要么抖动动画是字体特定的问题。或者您要使用的字体无法在浏览器中加载。

CSS Transition font-size：避免抖动/摆动

3 个答案: