CSS3可以转换字体大小吗?

如何使鼠标hover的字体变大? 随着时间的推移,颜色转换工作正常,但由于某种原因,字体大小立即切换。

示例代码:

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; } 

随着时间的推移颜色过渡很好,但由于某种原因,字体会立即切换。

您的font-size转换正在被您的color转换覆盖。

 transition: font-size 12s; /* transition is set to 'font-size 12s' */ transition: color 12s; /* transition is set to 'color 12s' !! */ 

相反,你必须把它们全部合并成一个声明:

 transition: color 12s, font-size 12s; 

请参阅: http : //jsfiddle.net/thirtydot/6HCRs/

 -webkit-transition: color 12s, font-size 12s; -moz-transition: color 12s, font-size 12s; -o-transition: color 12s, font-size 12s; transition: color 12s, font-size 12s; 

(或者,只需使用all关键字: transition: all 12s;http://jsfiddle.net/thirtydot/6HCRs/1/ )。

尝试设置所有属性的过渡:

 -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -ms-transition: all 0.3s ease; 

它也是有效的。

只是字体: transition: font 0.3s ease

font-size转换看起来像是逐个像素,因此不光滑。

如果只有一行,则可以使用transform: scale(.8) 。 缩小和不起来,所以你不会失去质量。 您可能还需要使用transform-origin: 0 0或取决于文本alignment的不同值。

JS小提琴演示

另一种方法是,您也可以使用像jQuery Transit这样的框架为您轻松完成此任务:

使用Javascript:

 $("p").hover( function () { //On hover in $("p").transition({ 'color': '#FC0', 'font-size': '40px' }, 1000); }, function () { //On hover out $("p").transition({ 'color': '#0F9', 'font-size': '12px' }, 1000); }); 

CSS:

 p { font-size: 12px; color: #0F9; }