CSS3 scale()导致div变为像素化

Question

我注意到,当动画CSS3时,scale()它似乎像素化了它所使用的每个元素.

示例:http://jsfiddle.net/PD7Vh/2/

在上面的示例中,scale()当您将鼠标悬停在中心div上时,将像素化为像素化.

我的css设置是错误的,还是这scale()自然是什么？

以下是Windows 7上Chrome的屏幕截图:

Answer 1

解决方案是将中心圆开始尽可能大,然后将其缩小为参考起点.

然后,在悬停事件中,您可以缩放到1,这将保留未混合的中心圆.

参考:jsFiddle

请注意,由于补偿了这些更改,因此完成了其他设置,例如定位.

状态更新:
考虑使用ASCII圆圈或轮廓圆圈而不是使用border-radius制作圆圈:

•○☺☻☼

参考: jsFiddle(注意位置未校准.)

上面的字符基本上是TEXT,因此使用任何 CSS2或CCS3 文本或字体属性!

由于某些角色变得非常大,所以它们会进行像素化,因此对于这些角色使用" 反向缩放 "方法,如前所述,但请注意,至少在Firefox中,当使用超大字体时,过渡变得昂贵.最适合中大字体.

提示: 这个基于ASCII的方法可能需要的width and height properties,才能正确地实现定位,所以使用,如果定位似乎打破.