CSS3 scale() 导致 div 像素化

Question

我注意到，在为 CSS3 scale() 设置动画时，它似乎像素化了它所使用的每个元素。

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

在上面的示例中，scale() 将鼠标悬停在中心 div 上时对其进行像素化处理。

是我的 css 设置有误，还是 scale() 自然如此？

这是 Windows 7 上 Chrome 的屏幕截图:

Answer 1

解决方案是将您的中心圆圈设置得尽可能大，然后将其缩小作为引用起点。

然后，在悬停事件上放大到 1，这将保留未像素化的中心圆。

引用:jsFiddle

请注意，定位等其他设置是为了补偿这些变化而完成的。

---

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

• ○ ☺ ☻ ☼

引用: jsFiddle (注意位置未校准。)

以上字符本质上是文本，因此使用任何 CSS2 或 CCS3 文本或字体属性!

随着某些字符变得非常大，它们会像素化，因此如前所述，对这些字符使用“反向比例”方法，但请注意，在至少在 Firefox 中，当使用超大字体时，转换变得昂贵。最适合中到大字体。

提示: 这种基于 ASCII 的方法可能需要宽度和高度属性才能正确实现定位，因此请使用如果定位似乎损坏了。