Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Wie erstelle ich eine endlose CSS-Rotationsanimation?

DDD
Freigeben: 2024-11-06 13:12:02
Original
752 Leute haben es durchsucht

How to Create an Endless CSS Rotation Animation?

Endlose CSS-Rotationsanimation implementieren

Problem:

Ziel ist es, ein Ladesymbol mithilfe von CSS, dem bereitgestellten Code, kontinuierlich zu drehen erzeugt nicht die gewünschte Animation. Wie kann man diese Rotation mithilfe von CSS effektiv erreichen?

Lösung:

Um eine endlose Rotation mithilfe von CSS zu erreichen, führen Sie die folgenden Schritte aus:

  1. CSS-Animations-Keyframes hinzufügen:

    • Rotierende Keyframes in der @keyframes-Notation definieren.
    • Von- und Bis-Zustände für die Rotationstransformation festlegen.
  2. Animation auf Zielelement anwenden:

    • Erstellen Sie eine rotierende Klasse in Ihrem CSS.
    • Wenden Sie die Animation an zum gewünschten Element mithilfe von Animationsname, Animationsdauer und Animationsiterationsanzahl.
  3. Anbieterpräfixe einbeziehen:

    • Fügen Sie -webkit-, -moz- usw. Präfixe für browserübergreifende Kompatibilität hinzu.

Beispielcode:

<code class="css">@-webkit-keyframes rotating {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotating {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.rotating {
  -webkit-animation: rotating 2s linear infinite;
  animation: rotating 2s linear infinite;
}</code>
Nach dem Login kopieren

Html:

<code class="html"><div 
  class="rotating"
  style="width: 100px; height: 100px; line-height: 100px; text-align: center;" 
 >Rotate</div></code>
Nach dem Login kopieren

Dieser überarbeitete Code gewährleistet eine kontinuierliche Rotation des Elements mit endlosen Iterationen und löst das Problem, das beim vorherigen Versuch aufgetreten war.

Das obige ist der detaillierte Inhalt vonWie erstelle ich eine endlose CSS-Rotationsanimation?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage