CSS3 scale（）导致div变为像素化

Question

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

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

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

我的css设置是错误的，还是scale()自然而然的呢？

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

Answer 1

解决方案是开始你需要的大中心圆，然后将其缩小作为参考起点。

然后，在悬停事件中，您可以扩展到1，这将保留未混合的中心圆。

参考：jsFiddle

注意其他设置（例如定位）是由于补偿了这些变化而完成的。

---

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

•○☺☻☼

参考： jsFiddle（注意位置未校准。）

上述字符基本上是TEXT，因此使用 ANY CSS2或CCS3 文字或字体属性！

由于某些角色变得非常大，他们会进行像素化处理，因此对于这些字符使用“ 反向比例 ”方法，如前所述但请注意，至少在Firefox中，当使用超大字体时，转换变得昂贵。适用于大中型字体。

提示： 这种基于ASCII的方法可能需要 width and height properties才能正确实现定位，所以如果定位似乎已经破坏，请使用它。 / em>的