Me he dado cuenta de que al animar CSS3 scale() parece pixelar cada elemento en el que se usa.Escala CSS3() hace que los divs se pixelen
Ejemplo: http://jsfiddle.net/PD7Vh/2/
En el ejemplo anterior, scale() pixelates el div central cuando se pasa sobre ella.
¿Son mis configuraciones de CSS incorrectas, o es esto lo que scale() hace naturalmente?
Aquí hay una captura de pantalla de Chrome en Windows 7:
La solución es comenzar su círculo central tan grande como tiene que ser, entonces disminuye la escala como el punto de partida de referencia.
Luego, en el evento de desplazamiento, se aumenta hasta 1, lo que preservará el círculo central no ponderado.
Referencia: jsFiddle
Nota otros ajustes como el posicionamiento se realizan debido a compensar estos cambios.
la actualización de situación:
Considere en lugar de utilizar la frontera de radio para hacer el círculo, utilice ASCII Character de círculo o en un esquema círculo:
Referencia:jsFiddle (Las posiciones de la nota no están calibradas)
Los caracteres anteriores son esencialmente de texto, utilice por lo tanto, CUALQUIER CSS2 o CCS3 texto o propiedad de fuente!
Como ciertos personajes se convierten en muy grande que no pixelate a fin de utilizar "escala inversa" método para estos caracteres responderse como anteriormente, pero tenga en cuenta, al menos en Firefox, las transiciones se vuelven caros cuando súper fuentes grandes son usado. Funciona mejor con fuentes medianas a grandes.
Consejo:Este método basado ASCII pueden necesitar lawidth and height properties para el posicionamiento a ser realizado correctamente, por lo que si utiliza el posicionamiento parece roto.
Para aclarar aún más, dado que su objetivo era escalar originalmente la dimensión del círculo 4 veces más grande, la dimensión inicial para el tamaño del círculo debe ser 4 veces más pequeña o 1/4 del tamaño. Dicho esto, la escala inicial de 0.25 se realiza porque es el equivalente decimal de 1/4. – arttronics
Echa un vistazo a la nueva Actualización de estado en mi respuesta para el método de círculo alternativo. – arttronics
Pixelate? ¿Quieres decir que explota los píxeles del círculo en lugar de dibujar un nuevo círculo suave? ¿En qué navegador? –
Esto podría ayudar: http://stackoverflow.com/questions/9986226/when-scaling-an-element-with-css3-scale-it-becomes-pixelated-until-just-after-t – RhinoWalrus
@MrLister sucede en Chrome y safari – zero