我做了下面的瓷砖,悬停效果增加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
根本不平滑.换句话说,当改变大小时,它会上下摆动.
有没有人有一个想法如何解决或解决它?