Heim > Artikel > Web-Frontend > Reines HTML5+CSS3 zum Erstellen der Bilddrehung

Reines HTML5+CSS3 zum Erstellen der Bilddrehung

不言Original: 2018-06-05 15:00:041807Durchsuche

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>

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!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Beispielcode zum Deaktivieren von Mausklickereignissen mit reinem CSSNächster Artikel：Beispielcode zum Deaktivieren von Mausklickereignissen mit reinem CSS

In Verbindung stehende Artikel

Mehr sehen