Heim > Artikel > Web-Frontend > Wie erreicht man eine CSS3-Bilddrehung? So erzielen Sie einen Bildrotationsanimationseffekt in CSS3
Wie erreicht man eine CSS3-Bilddrehung? So erzielen Sie einen Bildrotationsanimationseffekt in CSS3
- 不言Original
- 2018-09-12 14:24:4010907Durchsuche
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>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
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!