Heim >Web-Frontend >CSS-Tutorial >Wie erstelle ich eine endlose CSS-Rotationsanimation?
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:
CSS-Animations-Keyframes hinzufügen:
Animation auf Zielelement anwenden:
Anbieterpräfixe einbeziehen:
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!