So erzielen Sie den Animationseffekt der Bilddrehung in HTML5

In diesem Artikel wird hauptsächlich der Animationseffekt von HTML5 vorgestellt, um die Bildrotation zu erreichen. Freunde, die sie benötigen, können sich darauf beziehen

1 Schauen Sie sich zuerst den Effekt an:

2. Der Code sieht so aus:

<img src="/static/imghw/default1.png"  data-src="images/circle.png"  class="lazy"   alt="" id="circle"/>
@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 von Bitte achten Sie auf den Inhalt der chinesischen PHP-Website!

Verwandte Empfehlungen:

So verwenden Sie jQuery und HTML5, um den besonderen Effekt des Umziehens durch Schütteln des Telefons zu erzielen

Anleitung Verwenden Sie Canvas zum Implementieren. Drücken und Halten. Mausbewegung zeichnet eine Flugbahn

unter Verwendung von HTML5 So zeichnen Sie Polygone wie Dreiecke und Rechtecke mit Canvas

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!