Verschieben eines Div auf einem kreisförmigen Pfad mit HTML/JavaScript/CSS

Question

Ich möchte einen Kreis entlang eines kreisförmigen Pfades mit HTML/CSS/JavaScript verschieben. Gibt es einen Weg, dies zu erreichen? Der Code für Kreis hinzugefügt unter:

.circle{ 
    width:50px; 
    height:50px; 
    display:block; 
    border-radius:50px; 
    -moz-border-radius:50px; 
    -webkit-border-radius:50px; 
    -khtml-border-radius:50px; 
    color:#fff; 
    background-color:#b9c1de; 

} 

<div class="circle"></div> 

Answer 1

Das erreichen Sie mit reinem css3. Schreiben wie folgt aus:

CSS

.dot{ 
    position:absolute; 
    top:0; 
    left:0; 
    width:50px; 
    height:50px; 
    background:red; 
    border-radius:50%; 
} 
.sun{ 
    width:200px; 
    height:200px; 
    position:absolute; 
    -webkit-animation-iteration-count:infinite; 
    -webkit-animation-timing-function:linear; 
    -webkit-animation-name:orbit; 
    -webkit-animation-duration:5s; 
    top:50px; 
    left:50px; 
} 

@-webkit-keyframes orbit { 
from { -webkit-transform:rotate(0deg) } 
to { -webkit-transform:rotate(360deg) } 
} 

HTML

<div class="sun"> 
<div class="dot"></div> 
</div>​ 

prüfen diese http://jsfiddle.net/r4AFV/

AKTUALISIERT

http://jsfiddle.net/r4AFV/1/

Answer 2

Hey das ist nicht mein Code,

aber diesen Link prüfen es für Sie

hilfreich sein können

http://jsfiddle.net/W69s6/20/

Answer 3

Es Math Zeit ist!

function circle(){ 
    var width = 10, 
     height = 10, 
     offsetX = 100, 
     offsetY = 100, 
     x = Math.cos(new Date()) * width + offsetX; //Remember high school? 
     y = Math.sin(new Date()) * height + offsetY; 

    //Do whatever you want here with the coordinates. 
    document.getElementsByClassName("circle")[0].style.left = x; 
    document.getElementsByClassName("circle")[0].style.top = y; 

    setTimeout(circle, 50); 
} 

Answer 4

Hier ist eine reine JavaScript-Lösung, die ich zusammen geworfen habe. Sollte sehr gute Browserunterstützung haben (kein CSS3 erforderlich). Es ist in hohem Maße konfigurierbar. Stellen Sie sicher, dass Sie sich die Konfigurationsoptionen unter unten des JavaScript-Abschnitts ansehen. Keine Bibliothek erforderlich.

http://jsfiddle.net/nN7ct/

Answer 5

Es gibt 2 Arten von einem Behälter div in einer Kreisbahn mit CSS bewegenden:

1) Animieren der CSS-Eigenschaft-Transformation:
Das Element, das gedreht werden soll, müssen ein Elternelement 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:
Übergeordnete hat relative Positionierung. Machen Sie es auch kreisförmig, indem Sie gleiche Höhe, Breite, Rand-Radius = 50% geben
Kind hat absolute Position. Es wurde eine Höhe & Breite, oben & links Eigenschaften gegeben, so dass es in der oberen Mitte des Elternteils erscheint.

#parent { 
    position: relative; 
    width: 300px; 
    height: 300px; 
    border: 1px solid rgba(0,0,0,0.1); 
    border-radius: 50%; 
    transform: rotate(0deg); 
    transition: transform 0.7s linear; 
} 

#child { 
    position: absolute; 
    width: 80px; 
    height: 80px; 
    transform: rotate(0deg); 
    transition: transform 0.7s linear; 
    top: -40px; 
    left: 110px; 
    border: 1px solid black; 
} 

$("#button").on('click', function() { 
    $("#parent").css({ transform: 'rotate(60deg)' }); 
    $("#child").css({ transform: 'rotate(-60deg)' }); 
}); 

http://usefulangle.com/post/32/moving-an-element-in-circular-path-with-css ist ein Blog-Post, die ich geschrieben habe. Enthält auch eine Demo.

2) Animieren die CSS-Offset-Eigenschaft position:
Mit dem neuen CSS Bewegungspfad oder Offset-Pfad, ist es möglich, ein Element entlang jeden Pfad 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 Offset-Pfad Eigenschaft definieren. Animieren Sie anschließend die Offset-Distanz-Eigenschaft ü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, wird der Pfad ebenfalls kreisförmig sein.

#child { 
    offset-path: margin-box; 
} 

Siehe http://usefulangle.com/post/33/moving-element-in-circular-path-with-css-offset-path für den entsprechenden Beitrag Blog in Kreis Animation mit Bewegungspfad zu tun.