Wie erstelle ich eine endlose CSS-Rotationsanimation zum Laden von Symbolen?

Endlose CSS-Rotationsanimation

Ladesymbole sind für das Benutzererlebnis von entscheidender Bedeutung und bieten visuelles Feedback beim Laden der Website. Durch Anpassen der Drehung dieser Symbole mithilfe von CSS können Sie deren Funktionalität und Ästhetik verbessern. Die Implementierung einer unendlichen Rotation mit CSS kann sich jedoch als Herausforderung erweisen.

Betrachten Sie das folgende Beispiel:

#test {
    width: 32px;
    height: 32px;
    background: url('refresh.png');
}

.rotating {
    -webkit-transform: rotate(360deg);
    -webkit-transition-duration: 1s;
    -webkit-transition-delay: now;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
}

<div id="test" class="rotating"></div>

Obwohl dieses CSS intuitiv erscheint, gelingt es ihm nicht, die beabsichtigte unendliche Rotation für zu erzeugen Ladesymbol. Um eine endlose Rotation zu erreichen, muss die Animation mithilfe von Keyframes anstelle von Transformationen angewendet werden.

Das korrigierte CSS mithilfe von Keyframes folgt:

@-webkit-keyframes rotating /* Safari and Chrome */ {
  from {
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotating {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.rotating {
  -webkit-animation: rotating 2s linear infinite;
  -moz-animation: rotating 2s linear infinite;
  -ms-animation: rotating 2s linear infinite;
  -o-animation: rotating 2s linear infinite;
  animation: rotating 2s linear infinite;
}

Dieser korrigierte Code gewährleistet eine reibungslose und kontinuierliche Rotation des Ladesymbols auf unbestimmte Zeit, wodurch seine Funktionalität und sein optischer Reiz verbessert werden.

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