Ich habe zwei Überschriften/divs und ich muss die Plätze nach 5 Sekunden in der Art wie auf dem Bild ändern. Ich habe einige Übergänge und ähnliches ausprobiert, aber ich habe nirgends gefunden, wie man Elemente kreisförmig bewegen kann.Zwei HTML-Überschriften - Plätze in Kreisen tauschen?
Die Bewegung der Elemente muss wie "halbkreisförmig" sein. Der Beispielcode ist in den Kommentaren.
Positionieren Sie die Überschriften in einem Container. Mit der CSS-Animation können Sie den Container drehen und die Überschriften in die andere Richtung drehen. Die Animation ist unendlich, also ist die Verzögerung in der Animation selbst.
Aufgrund der Verzögerung können wir nicht einfach die rotate Animation umkehren, und wir müssen die umgekehrte rotateCounter Animation hinzufügen.
.container {
position: relative;
width: 200px;
height: 200px;
margin: 0 auto;
animation: rotate 12s linear infinite;
}
.heading {
position: absolute;
animation: rotateCounter 12s linear infinite;
}
.heading1 {
top: 0;
left: 0;
}
.heading2 {
right: 0;
bottom: 0;
}
@keyframes rotate {
8% { transform: rotate(-180deg); }
50% { transform: rotate(-180deg); }
58% { transform: rotate(-360deg); }
100% { transform: rotate(-360deg); }
}
@keyframes rotateCounter {
8% { transform: rotate(180deg); }
50% { transform: rotate(180deg); }
58% { transform: rotate(360deg); }
100% { transform: rotate(360deg); }
}<div class="container">
<h2 class="heading heading1">Heading 1</h2>
<h2 class="heading heading2">Heading 2</h2>
</div>Danke duuuuuu !!!! – user5618385
Versuchen Sie, die setInterval() Funktion. Und genau wie andere gesagt haben. Wenn Sie immer noch nicht arbeiten können. Bitte geben Sie Ihren Beispielcode ein, dann können wir Ihnen helfen.
Können Sie uns bitte Ihren Code zeigen, was Sie bisher versucht haben? – amoeba
Bitte besuchen Sie die [Hilfe] (http://stackoverflow.com/help), um zu sehen, [wie Sie eine gute Frage stellen] (http://stackoverflow.com/help/how-to-ask) und Welche Arten von Fragen sind [zum Thema] (http://stackoverflow.com/help/on-topic) für die Website – Pete
Es wird erwartet, dass Sie zumindest versuchen, dies für sich selbst zu kodieren. Stack Overflow ist kein Code-Schreibdienst. Ich würde vorschlagen, dass Sie einige [** zusätzliche Forschung **] (http://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-sected-of-stack-overflow-users) tun entweder über Google oder durch die Suche nach SO, versuchen und. Wenn Sie immer noch Probleme haben, kommen Sie zurück mit ** Ihrem Code ** und erklären Sie, was Sie versucht haben. –