怎样才能使鼠标经过时字体变得更大?随着时间的推移,颜色转换效果很好,但由于某些原因,字体大小会立即切换。
示例代码:
body p {
font-size: 12px;
color: #0F9;
transition:font-size 12s;
-moz-transition:font-size 12s; /* Firefox 4 */
-webkit-transition:font-size 12s; /* Safari and Chrome */
-o-transition:font-size 12s;
transition:color 12s;
-moz-transition:color 12s; /* Firefox 4 */
-webkit-transition:color 12s; /* Safari and Chrome */
-o-transition:color 12s;
}
p:hover {
font-size: 40px;
color:#FC0;
}
发布于 2014-04-05 05:50:54
font-size
的过渡似乎是逐个像素进行的,因此并不平滑。
如果只有一行,您也许可以使用transform: scale(.8)
。缩小而不是放大,这样你就不会失去质量。您可能还需要使用transform-origin: 0 0
或其他值,具体取决于文本对齐方式。
#size ,#transform{
height: 80px;
position:absolute;
animation-iteration-count: infinite;
animation-duration: 3s;
animation-direction: alternate;
}
#size {
animation-name: size;
}
@keyframes size {
from {
font-size:10px;
left:155px;
top:40px;
}
to {
font-size:80px;
top:0;
left:30px;
}
}
#transform {
animation-name: transform;
transform-origin: center middle;
font-size:80px;
top:80px;
}
@keyframes transform {
from {
transform:scale(.1);
}
to {
transform:scale(1);
}
}
<div id=size>Font-size</div>
<div id=transform>Transform</div>
https://stackoverflow.com/questions/9311116
复制相似问题