CSS3可以转换字体大小吗？
CSS3可以转换字体大小吗？
提问于 2012-02-16 20:16:57
怎样才能使鼠标经过时字体变得更大？随着时间的推移，颜色转换效果很好，但由于某些原因，字体大小会立即切换。
示例代码：
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;
}回答 1
Stack Overflow用户
发布于 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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/9311116
复制相关文章
相似问题