相关疑难解决方法(0)

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

我做了下面的瓷砖,悬停效果增加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;
}
Run Code Online (Sandbox Code Playgroud)
<div class="website">Blog 1</div>
<div class="website">Blog 2</div>
<div class="website">Blog 3</div>
Run Code Online (Sandbox Code Playgroud)

当你悬停它们时,你可以看到它的过渡font-size根本不平滑.换句话说,当改变大小时,它会上下摆动.
有没有人有一个想法如何解决或解决它?

html css

7
推荐指数
1
解决办法
1万
查看次数

标签 统计

css ×1

html ×1