Wie erreicht man eine CSS3-Bilddrehung? So erzielen Sie einen Bildrotationsanimationseffekt in CSS3-CSS-Tutorial-php.cn

Wie erreicht man eine CSS3-Bilddrehung? So erzielen Sie einen Bildrotationsanimationseffekt in CSS3

不言

Freigeben： 2018-09-12 14:24:40

Original

10874 Leute haben es durchsucht

Auf Webseiten können wir oft sehen, wie sich ein Bild dreht. In diesem Artikel erfahren Sie, wie Sie mit CSS3 einen Bildrotationsanimationseffekt erzielen.

Die Drehung von Bildern in CSS3 kann mithilfe einer Kombination aus -webkit-animation und @-webkit-keyframes erreicht werden.

-webkit-animation ist ein zusammengesetztes Attribut, das wie folgt definiert ist:

-webkit-animation: Name Dauer Timing-Funktion Verzögerung Iteration_Anzahl Richtung;

name: ist eine Methode, die in @-webkit-keyframes angegeben werden muss, um eine Animation durchzuführen.

Dauer: Die Dauer der Animationsausführung in einem Zyklus.

Timing-Funktion: Der Effekt der Animationsausführung kann linear sein oder „schnell rein und langsam raus“ usw. sein.

Verzögerung: Die Dauer der Ausführung der Animationsverzögerung.

iteration_count: Die Anzahl der Ausführungszeiten der Animationsschleife. Wenn sie unendlich ist, wird sie unendlich oft ausgeführt.

Richtung: Richtung der Animationsausführung.

Die beiden Attribute from und to in @-webkit-keyframes geben den Anfangswert und Endwert der Animationsausführung an.

-webkit-animation-play-state:paused; Pausiert die Ausführung der Animation.

Nachdem wir die in CSS3 zum Implementieren der Bildrotation verwendeten Attributwerte verstanden haben, schauen wir uns direkt den Code für CSS3 zum Implementieren der Bildrotationsanimation an:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title>transform</title>
  <style>
    #loader {
        display: block;
        position: relative;
        -webkit-animation: spin 2s linear infinite;
        animation: spin 2s linear infinite;
    }
    @-webkit-keyframes spin {
        0%   {
            -webkit-transform: rotate(0deg);
            -ms-transform: rotate(0deg);
            transform: rotate(0deg);
        }
        100% {
            -webkit-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
            transform: rotate(360deg);
        }
    }
    @keyframes spin {
        0%   {
            -webkit-transform: rotate(0deg);
            -ms-transform: rotate(0deg);
            transform: rotate(0deg);
        }
        100% {
            -webkit-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
            transform: rotate(360deg);
        }
    }
  </style>
 </head>
 <body>
  <div id="test" >
　　<img src="http://img4.imgtn.bdimg.com/it/u=3413495237,2076545415&fm=26&gp=0.jpg" style="width:250px;height:250px" id="loader" />  
  </div>
 </body>
</html>

Nach dem Login kopieren

Dieser Artikel endet hier. Weitere Animationseigenschaften in CSS3 finden Sie im CSS3-Lernhandbuch.

Verwandte Empfehlungen:

CSS3, um Bildvergrößerung und -rotation zu erreichen_html/css_WEB-ITnose

Wie man Bilder dazu bringt, nicht zu erreichen -Realisierung mit CSS3 Welchen Effekt hat das Stoppen der Rotation? 【Detaillierte Erklärung】

Das obige ist der detaillierte Inhalt vonWie erreicht man eine CSS3-Bilddrehung? So erzielen Sie einen Bildrotationsanimationseffekt in CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!