我制作了以下图块,具有增加 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 许可协议
您可以使用 CSS
transform:scale
来实现更平滑的过渡,如下所示:这是 JSFiddle 演示
另请注意,我在
div
中添加了文本,缩放是在div
上完成的,这样 整个 框就不会缩放 :)