Beispielcode zur Implementierung der Ellipsenbahnrotation mit CSS3

In letzter Zeit müssen folgende Effekte erzielt werden

Zunächst kann die Verwendung von css3D-Rotation zum Schreiben nur die folgenden Effekte erzielen

Ich kann nicht alle Kreise nach vorne drehen. Ich weiß nicht, ob meine Operation falsch ist oder eine 3D-Drehung nicht möglich ist. Wenn jemand Bescheid weiß, klärt mich bitte auf.

Da es in 3D nicht realisierbar ist, können wir nur auf 2D umsteigen. Solange wir die Drehung entsprechend der Ellipse realisieren können, ist es ok.

X-Achse und Y-Achse bewegen sich innerhalb eines Rechtecks

Pfad ist ein Schrägstrich

 .ball {
    Animation: 
      animX 2s linear unendlich alternativ,
      animY 2s linear unendlich alternativ
  }
@keyframes animX{
      0 % {links: 0px;}
    100 % {links: 500px;}
}
@keyframes animY{
      0 % {oben: 0px;}
    100 % {oben: 300px;}
} 

Einstellen der Animationsverzögerung

Stellen Sie die Verzögerung der Y-Achse auf die Hälfte der Animationsdauer ein. Sie können sehen, dass die Bewegungsbahn eine Rautenform annimmt. Das fühlt sich etwas besser an.

 .ball {
    Animation: 
      animX 2s linear 0s unendlich alternativ,
      Animation 2 s linear -1 s unendlich alternativ
  } 

Legt eine kubische Bézierkurve fest

 .ball {
    Animation: 
      animX 2s Kubik-Bezier(0,36, 0, 0,64, 1) -1s unendlicher Wechsel,
      animY 2s kubisch-bezier(0.36, 0, 0.64, 1) 0s unendlich alternativ
  }

Vergrößern und Verkleinern

Um es dreidimensional aussehen zu lassen, fügen Sie scale hinzu. Die Skalierungsanimation sollte die Summe der Zeit der X-Achse und der Y-Achse sein.

.ball1 {
    Animation: 
      animX 2s Kubik-Bezier(0,36, 0, 0,64, 1) -1s unendlicher Wechsel,
      animY 2s kubisch-bezier(0.36, 0, 0.64, 1) 0s unendlich alternierend,
      Maßstab 4s kubisch-bezier (0,36, 0, 0,64, 1) 0s unendlich alternativ;
  }
 @keyframes skalieren {

    0% {
      transformieren: Skalierung(0,7)
    }
    50 % {
      transformieren: skalieren(1)
    }
    100 % {
      transformieren: Skalierung(0,7)
   }
 } 

Mission erfüllt!

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.