So erzielen Sie den Animationseffekt der Bilddrehung in HTML5

Dieses Mal zeige ich Ihnen, wie Sie den Animationseffekt beim Drehen von Bildern in HTML5 erzielen. Was sind die Vorsichtsmaßnahmen, um den Animationseffekt beim Drehen von Bildern in HTML5 zu erzielen?

1. Schauen Sie sich zuerst den Effekt an:

2. Der Code lautet wie folgt:

<img  src="/static/imghw/default1.png" data-src="images/circle.png" class="lazy" alt="So erzielen Sie den Animationseffekt der Bilddrehung in HTML5" >
@mixin ani-btnRotate{
    @keyframes btnRotate{
        from{transform: rotateZ(0);}
        to{transform: rotateZ(360deg);}
    }
}
@include ani-btnRotate;
#circle{
    position: absolute;
    left: 50%;
    width: REM(338);
    height:  REM(338);
    margin-top: REM(200);
    margin-left: REM(-338/2);
    transform-origin: center center ;
    animation: btnRotate 1s 1s linear forwards;
    }

verwendet Das Bild ist dieses: (Es ist das weiße rotierende Bild)

Ich glaube, Sie haben es gemeistert Nachdem Sie den Fall in diesem Artikel gelesen haben, lesen Sie bitte andere verwandte Artikel auf der chinesischen PHP-Website. Weitere spannende Methoden finden Sie hier!

Empfohlene Lektüre:

So fügen Sie rechts neben dem Auswahl-Dropdown-Feld ein Eingabeaufforderungssymbol hinzu

Wie um Canvas zu verwenden, um eine benutzerdefinierte Avatar-Funktion zu implementieren

Detaillierte Erklärung von Drag & Drop in H5

Das obige ist der detaillierte Inhalt vonSo erzielen Sie den Animationseffekt der Bilddrehung in HTML5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!