Heim >Web-Frontend >CSS-Tutorial >Wie erstelle ich eine endlose CSS-Rotationsanimation?

Wie erstelle ich eine endlose CSS-Rotationsanimation?

DDD
DDDOriginal
2024-11-06 13:12:02761Durchsuche

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>

Html:

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

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!

Stellungnahme:
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