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

Question

.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最好了.

Answer 1

You change all in the transition to the specific attribute to be changed. All means changing all

Answer 2

font-stretch:normal;
Just remove it. .

Answer 3

The font size getting bigger has nothing to do with all, transition:all 0.1s; this is just transition time

.hoverMenu:hover .font{transform:scale(1);},
.font is a class of text that you don’t want to make larger. Try setting its magnification factor to 1 (unchanged)

Answer 4

When I saw a Baidu website a few days ago, I first enlarged the font and then retracted it to its original size. The effect was quite satisfactory

Answer 5

You want to make a zoom animation, right? Don't use scale? Use translate3D(0,0,0) -> translate3D(0,0,50000) to make the animation smoother; it needs to be matched with the perspective attribute;
PS: Because the text requires the browser to follow the system's font antialias (font smoothing or TrueType in win), in order to save performance loss, you need to temporarily disable font smoothing during animation, and then abandon font smoothing after the animation is over; this is when you see that the font is thinner and the corners are sharper, and then after the animation is completed The font has become smoother; in order to prevent this disgusting situation, this kind of animation is usually combined with opacity, and the text is made into a fade-in animation. . . It’s a cover-up;