Animieren der drehende Kreis(in Prozent) mit css
Wie kann ich machen das drehende Kreise, die auf der folgenden Website http://www.awwwards.com/
Für meine Website, ich brauche es nicht zu dynamisch sein. Zumindest dieses mal nicht. Ich habe ausprobiert verschiedene Lösungen an, die sowohl mit Javascript und CSS, aber ich bin mir nicht sicher, was ist die beste Methode, diese zu erstellen.
-moz-transform: rotate(270);
-webkit-transform: rotate(270);
-o-transform:rotate(270deg);
transform: rotate(270deg);
transition: all 2s;
Dies ist so ziemlich alles, was ich weiß, über übergänge, aber ich denke, es ist genug. Allerdings hätte ich meine "Kuchen" der Kuchen schneiden, bevor der übergang anfangen, oder?
Wer weiß, wo ich anfangen soll?
InformationsquelleAutor sindrem | 2014-01-17
Du musst angemeldet sein, um einen Kommentar abzugeben.
Lesen Sie diesen Artikel und finden Sie ein funktionierendes Beispiel und auch verstehen, wie es funktioniert css-pie-timer
UPDATE
Ich wusste nicht, wie die Lösung, also habe ich versucht es zu implementieren, meinem selbst und mit ein wenig Hilfe (ich fragte einige Fragen hier) ich Schaffe das nicht ziemlich elegant.
Die Idee dabei ist, zu verstehen, wie einen Kreis zu zeichnen Sektor und starten Sie Zeichnung Abschnitt mit Grad = 0 bis Grad sollen.
Ich es auch reversibel, nur für Spaß :).
HTML
Den aktiven Grenze ersetzt werden, mit dem aktuellen Prozentsatz. Die prec span enthält der textliche Anteil und die insgesamt Grad Sie wollen (270) in diesem Beispiel. Als ich es umgesetzt, der Anteil muss die zweite Klasse.
CSS
Dies ist der schwierige Teil. Dies ist der schwierige Teil. Ich ziehe den Sektor auf diese Weise:
Erklärung: die erste
linear-gradient
Wert wird die Gradzahl angezeigt + 90.Wenn der Grad größer als 180 setzen wir den ersten
linear-gradient
Farbe der aktiven Farbe.JQuery
Und hier ist ein arbeiten demo
Hinweis Es funktioniert für firefox und chrome. Sie müssen hinzufügen IE-Unterstützung für
linear-gradient
.wie kann ich es stoppen an einem bestimmten Punkt? Sagen wir um 290deg. Wenn ich die demo-290 können Sie sehen, was landete ich mit dem ersten mal habe ich versucht, dies zu tun. codepen.io/anon/pen/nIDeH
codepen.io/anon/pen/gHxDb neueste. jetzt machen es halt zu einem gewissen Grad
Blick auf meine zweite Lösung
dies ist erstaunlich,! Vielen Dank!
InformationsquelleAutor Itay Gal
Ich mochte Itay Gal ' s Antwort wegen Ihrer Einfachheit, nur mit CSS und Javascript.
War ich in der Lage, um es zu vereinfachen weiter und machte es auch mehr von einer realen Welt-Beispiel, so dass es ausgeführt wird, wenn die Funktion aufgerufen wird (beim Start oder Wann auch immer Sie es nennen). Pass einfach in der prozentualen Anzahl, wo Sie wollen, es zu stoppen.
Funktioniert in allen modernen Browsern, einschließlich IE10+. Degradiert anmutig in älteren Browsern.
JSFiddle demo: https://jsfiddle.net/ggj55sqo/
HTML
CSS
JQuery
InformationsquelleAutor Doug S