Wie erstelle ich mit reinem CSS eine kontinuierlich rotierende Animation?-CSS-Tutorial-php.cn

Wie erstelle ich mit reinem CSS eine kontinuierlich rotierende Animation?

Linda Hamilton

Freigeben： 2024-11-05 10:24:02

Original

499 Leute haben es durchsucht

How to create a continuously rotating animation using pure CSS?

Endlose Rotationsanimation mit CSS

Anfrage:

Drehen Sie ein Ladesymbol auf unbestimmte Zeit mit pure CSS.

Code:

<code class="css">#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;
}</code>

Nach dem Login kopieren

Problem:

Der bereitgestellte Code initiiert die Rotationsanimation nicht als erwartet.

Lösung:

Um eine kontinuierliche Rotation mit CSS zu erreichen, müssen wir eine Animation verwenden. In diesem Fall verwenden wir die @keyframes-Regel, um die Animation zu definieren, und die Animations-CSS-Eigenschaft, um sie anzuwenden.

Aktualisierter Code:

<code class="css">@-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;
}</code>

Nach dem Login kopieren

Dieser aktualisierte Code definiert die rotierende Animation, die aus einer 360-Grad-Rotation über eine Dauer von 2 Sekunden besteht. Die Einstellung „Unendliche Iterationsanzahl“ stellt sicher, dass die Animation auf unbestimmte Zeit wiederholt wird.

Das obige ist der detaillierte Inhalt vonWie erstelle ich mit reinem CSS eine kontinuierlich rotierende Animation?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!