html - css3 transform transition 配合缩放，字体大小变化的问题？

.hoverMenu{
    -webkit-transition:all 0.1s;
    -moz-transition:all 0.1s;
    -o-transition:all 0.1s;
    transition:all 0.1s;
}

.hoverMenu:hover{
    -webkit-transform: scale(1.2);
    -moz-transform:scale(1.2);
    -o-transform:scale(1.2);
    transform:scale(1.2);
}

鼠标移动到这个p上面的时候，字体会变细变宽，最后正常？如何防止这种问题？

scale（）这个属性会影响字体？如何不让字体受到影响

这种方式确实还是有问题,通过绝对定位还是可以实现但是麻烦,所以还是通过jquery最好了.

# HTML

天蓬老师 2287 天前 1034 次浏览

全部回复(5) 我要回复

高洛峰2017-04-17 13:56:18

你把transition里面的all改成具体要变化的属性 all的意思是改变所有

巴扎黑2017-04-17 13:56:18

font-stretch:normal;
去掉就行了。。

伊谢尔伦2017-04-17 13:56:18

字体变大不关all的事情，transition:all 0.1s;这只是过度时间

.hoverMenu:hover .font{transform:scale(1);}，
.font是你不想变大的文字的一个类，把它的放大倍数为1（不变）试下

伊谢尔伦2017-04-17 13:56:18

前几天看到百度网页,是把字体先放大在缩回原来的大小.效果还挺理想

PHP中文网2017-04-17 13:56:18

你要做缩放的动画是吧？别用scale呗？用translate3D(0,0,0) -> translate3D(0,0,50000)这样的动画更平滑；需要配合perspective属性；
PS：因为文字需要浏览器依据系统的font antialias（字体平滑或者win里面的那个TrueType），为了节省性能损耗，需要在动画的时候暂时禁用字体平滑，动画结束后再弃用字体平滑；这就是你看到字体细一下，转角都很锐了，然后动画完成后字体有变回平滑了；为了防止这种恶心的情况，一般这种都会配合opacity的动画，吧文字做成淡入的动画。。。算是个障眼法吧；

取消回复发送

html - css3 transform transition 配合缩放，字体大小变化的问题 ？

全部回复(5) 我要回复

html - css3 transform transition 配合缩放，字体大小变化的问题？