Hey, das ist nicht mein Code,
aber überprüfen Sie diesen Link, es kann für Sie hilfreich sein
Hier ist eine reine JavaScript-Lösung, die ich zusammengestellt habe. Sollte sehr gute Browserunterstützung haben (kein CSS3 erforderlich). Es ist in hohem Maße konfigurierbar. Stellen Sie sicher, dass Sie die Konfigurationsoptionen unter unten des JavaScript-Abschnitts sehen. Keine Bibliothek erforderlich.
Es gibt 2 Möglichkeiten, ein Container-Div in einem kreisförmigen Pfad mit CSS zu verschieben:
1) Animieren der CSS-Transformationseigenschaft:
Das Element, das gedreht werden soll, muss ein Elternelement haben. Wenn Sie nun das Kind um 60 Grad bewegen möchten, drehen Sie zuerst das Elternteil um 60 Grad und dann drehen Sie das Kind um -60 Grad (ein entgegengesetzter Winkel, so dass das Kind nicht invertiert aussieht).
Verwenden Sie den CSS-Übergang, die CSS-Animation oder die Webanimations-API, um die Animation auszuführen.
Über den folgenden Code:
Parent hat relative Positionierung. Machen Sie es auch kreisförmig, indem Sie gleiche Höhe, Breite, Rand-Radius = 50% geben
Ein Kind hat absolute Position. Es wurde eine Höhe gegeben & amp; Breite, Top & Amp; Verlasse die Eigenschaften so, dass sie in der oberen Mitte des Elternteils erscheinen.
Ссылка ist ein Blogbeitrag, den ich geschrieben habe. Enthält auch eine Demo.
2) Animieren der CSS-Offset-Position-Eigenschaft:
Mit dem neuen CSS Motion Path oder Offset Path ist es möglich, ein Element entlang ANY-Pfaden zu animieren. Ab sofort (Januar 2017) funktioniert es jedoch nur mit der neuesten Version von Chrome.
Sie müssen einen kreisförmigen SVG-Pfad mit der Eigenschaft offset-path definieren. Anschließend animieren Sie die Eigenschaft Versatzdistanz über diesen Pfad mithilfe von CSS-Übergang, CSS-Animation oder Webanimations-API.
Abgesehen von der Definition eines SVG-Pfads können Sie set offset-path: margin-box angeben. Dies definiert den Pfad als Randgrenze des Elternteils. Wenn das übergeordnete Element kreisförmig mit Rahmenradius erstellt wurde, ist der Pfad ebenfalls kreisförmig.
Siehe Ссылка für die verwandter Blogpost, der sich mit animierter Animation beschäftigt.
Tags und Links javascript html css css3