Ich habe festgestellt, dass bei der Animation von CSS3 scale() jedes Element pixeliert, auf dem es verwendet wird.CSS3 scale() bewirkt, dass divs pixelig werden
Beispiel: http://jsfiddle.net/PD7Vh/2/
In dem obigen Beispiel scale() pixelates das Zentrum div, wenn Sie den Mauszeiger über sie.
Sind meine CSS Einstellungen falsch, oder ist das was scale() natürlich tut?
Hier ist ein Screenshot von Chrome auf Windows 7:
Die Lösung ist Ihr Mittelkreis so groß zu starten, wie es sein muss, dann als Referenzausgangspunkt verringern.
Dann auf dem Hover-Ereignis skalieren Sie bis zu 1, die den unpixelated Mittelkreis erhalten wird.
Referenz: jsFiddle
Hinweis andere Einstellungen wie Positionierung sind aufgrund getan für diese Änderungen zu kompensieren.
Status Update:
Betrachten Sie stattdessen border-radius der Verwendung von Kreis zu machen, ASCII Character des Kreises verwenden oder Kreis skizzieren:
Referenz:jsFiddle (Die Positionen sind nicht kalibriert.)
Die oben genannten Zeichen sind im Wesentlichen TEXT, daher ANY CSS2 oder CCS3 Text oder Schriftart Eigenschaft verwenden!
Da bestimmte Charaktere werden wirklich groß sie pixelate so verwenden „Reverse-Skala“ Methode für diese Zeichen wie zuvor beantwortet, aber beachten Sie, dass zumindest in Firefox, die Übergänge teuer werden, wenn sie super große Schriftarten sind benutzt. Funktioniert am besten mit mittleren bis großen Schriften.
Tipp:Diese ASCII basierte Methode kann die width and height properties zur Positionierung müssen richtig realisiert werden, so verwenden, dass, wenn Positionierung gebrochen zu sein scheint.
Um es weiter zu verdeutlichen: Da Ihr Ziel ursprünglich war, die Kreismaße 4 mal größer zu skalieren, muss das Startmaß für die Kreisgröße 4 mal kleiner oder 1/4 der Größe sein. Nachdem dies gesagt wurde, wird dann die Anfangsskala von 0,25 realisiert, da es das Dezimaläquivalent von 1/4 ist. – arttronics
Überprüfen Sie die neue Statusaktualisierung in meiner Antwort für die alternative Kreismethode. – arttronics
Pixelate? Sie meinen, dass es die Pixel des Kreises sprengt, anstatt einen neuen, glatten Kreis zu zeichnen? Auf welchem Browser? –
Dies könnte helfen: http://stackoverflow.com/questions/9986226/when-scaling-an-element-with-css3-scale-it-becomes-pixelated-until-just-after-t – RhinoWalrus
@MrLister es passiert in Chrom und Safari – zero