我做了下面的瓷砖,悬停效果增加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;
}
Blog 1
Blog 2
Blog 3
当你悬停它们时,你可以看到它的过渡font-size
根本不平滑.换句话说,当改变大小时,它会上下摆动.
有没有人有一个想法如何解决或解决它?
您可以使用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演示
另请注意,我在a中添加了文本,div
并且缩放已完成,div
因此整个框不会缩放:)