2012-07-03 16 views
7

我注意到,當動畫CSS3 scale()時,它似乎像素化它使用的每個元素。CSS3 scale()會導致div變得像素化

實施例:http://jsfiddle.net/PD7Vh/2/

在上述例子中,scale()將鼠標懸停它pixelates中心格。

我的css設置是錯誤的嗎?或者這是什麼scale()自然會做什麼?

下面是Chrome的Windows 7上的截圖:

+0

Pixelate?你的意思是它吹起了圓圈的像素,而不是畫出一個新的光滑的圓圈?在哪個瀏覽器上? –

+0

這可能有助於:http://stackoverflow.com/questions/9986226/when-scaling-an-element-with-css3-scale-it-becomes-pixelated-until-just-after-t – RhinoWalrus

+0

@MrLister它發生在鉻和狩獵 – zero

回答

9

解決的辦法是啓動中心圓一樣大,它需要,然後將其縮小爲基準起始點。

然後,在懸停事件上,您可以放大到1,這將保留非中心化的中心圓。

參考:jsFiddle

注意其他設置,如定位完成後,由於補償這些變化。


狀態更新:
考慮,而不是使用邊框半徑作圓,使用ASCII Character圈或輪廓 圈:

•○☺☻☼

參考:jsFiddle(注意位置不校準。)

以上人物基本上是TEXT,因此使用任何 CSS2或CCS3 文本或字體屬性

由於某些字符變得非常大,他們做像素化,以便用「反向規模」的方法對這些字符如先前回答,但請注意,至少在Firefox中,當超大字體的轉換變得昂貴用過的。適用於大中型字體。

提示:這個基於ASCII的方法可能需要width and height properties,才能正確地實現定位,所以使用,如果定位似乎打破。

+0

爲了進一步闡明,由於您的目標是最初將圓尺寸縮放4倍,因此圓尺寸的起始尺寸必須小4倍或1/4。也就是說,0.25的起始縮放比例因此被實現,因爲它是1/4的十進制等值。 – arttronics

+0

在我的答案中查看新的狀態更新以備用循環方法。 – arttronics