Reines HTML5+CSS3 zum Erstellen der Bilddrehung-CSS-Tutorial-php.cn

Reines HTML5+CSS3 zum Erstellen der Bilddrehung

不言

Freigeben： 2018-06-05 15:00:04

Original

1806 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich reines HTML5 + CSS3 zur Erzeugung von Bilddrehungen vorgestellt. Einige durch HTML5 in Kombination mit CSS3 erzielte Animationsspezialeffekte sind relativ einfach zu implementieren.

Dieses Beispiel kann angewendet werden Sehr praktisch in vielen Projekten und ich hoffe, dass jeder es meistern kann.

Das Rendering ist wie folgt:

Dieser Effekt ist eigentlich nicht schwer zu erreichen: Die Codeliste ist wie folgt:

XML/HTML-CodeInhalt in die Zwischenablage kopieren

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        #liu{     
            width:280px;     
            height: 279px;     
            background: url(shishi.png) no-repeat;     
            border-radius:140px;     
            -webkit-animation:run 6s linear 0s infinite;     
        }     
        #liu:hover{     
            -webkit-animation-play-state:paused;     
        }     
        @-webkit-keyframes run{     
            from{     
                -webkit-transform:rotate(0deg);     
            }     
            to{     
                -webkit-transform:rotate(360deg);     
            }     
        }     
    </style>
</head>
<body>
    <p id="liu"></p>
</body>
</html>

Nach dem Login kopieren

1. p mit der ID liu ist der Bereich, der zum Anzeigen von Bildern verwendet wird, aber die Bilder Verwenden Sie hier ein Hintergrundbild und erzielen Sie einen kreisförmigen Effekt, indem Sie abgerundete Ecken festlegen.
2. Der wichtigste Teil des Codes besteht darin, wie man das Bild unendlich dreht. Um dies zu erreichen, können wir -webkit-animation und @-webkit-keyframes in Kombination verwenden.

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

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

Name: ja Die Methode muss in @-webkit-keyframes angegeben werden, 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.

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

4. -webkit-animation-play-state:paused; Hält die Ausführung der Animation an.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für alle hilfreich sein, um Spezialeffekte der Bilddrehung zu erzielen.

Verwandte Empfehlungen:

Beispielcode für HTML5 zum Generieren eines Histogrammeffekts (Balkendiagramm)

Das obige ist der detaillierte Inhalt vonReines HTML5+CSS3 zum Erstellen der Bilddrehung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!