So stellen Sie das Element so ein, dass es sich in CSS immer dreht

So stellen Sie das Element so ein, dass es sich in CSS kontinuierlich dreht: Erstellen Sie zunächst eine HTML-Beispieldatei. Importieren Sie dann das Bild mit dem CSS-Stil „transform:rotate(360deg)“. Grad und legen Sie die Animationsdauer über das Attribut „animation-duration“ fest. Das ist alles.

Die Betriebsumgebung dieses Artikels: Windows 7-System, HTML5- und CSS3-Version, DELL G3-Computer

Beim Entwerfen von Webseiten stoßen wir häufig auf verschiedene Probleme bei der Bildanzeige. Beispielsweise müssen einige Bilder mit angezeigt werden abgerundete Ecken, klicken Sie auf das Bild, um die Anzeige und andere Effekte zu vergrößern.

Ich stelle Ihnen hauptsächlich die spezifische Methode zur Verwendung von CSS3 vor, um eine automatische zyklische 360-Grad-Rotation von Bildern zu realisieren.

CSS kann das Transformationsattribut verwenden, um Elemente so festzulegen, dass sie gedreht, skaliert, verschoben oder geneigt werden.

Wir können den CSS-Stil transform:rotate(360deg) verwenden, um das Element so einzustellen, dass es sich um 360 Grad dreht.

Sie können Animationen verwenden, um Animationseigenschaften festzulegen. Die Animationsdauer kann über die Eigenschaft „animation-duration“ festgelegt werden.

css3 kann den Drehwinkel des Elements auf 360 Grad festlegen, indem es den CSS-Stil des Elements auf transform:rotate(360deg) setzt und dann die Animationsdauer über das Attribut „animation-duration“ festlegt, um eine kontinuierliche Drehung des Elements zu erreichen.

Beispiel:

HTML-Code:

<div class="demo">
<img  class="an img" src="1.jpg"    style="max-width:90%"  style="max-width:90%"/ alt="So stellen Sie das Element so ein, dass es sich in CSS immer dreht" >

Das Animationscodebeispiel für die CSS-Bilddrehung um 360 Grad lautet wie folgt:

.demo{text-align: center;
    margin-top: 100px;}
@-webkit-keyframes rotation{
    from {-webkit-transform: rotate(0deg);}
    to {-webkit-transform: rotate(360deg);}
}
.an{
    -webkit-transform: rotate(360deg);
    animation: rotation 3s linear infinite;
    -moz-animation: rotation 3s linear infinite;
    -webkit-animation: rotation 3s linear infinite;
    -o-animation: rotation 3s linear infinite;
}
.img{border-radius: 200px;}

Rendering:

Empfohlenes Lernen: „CSS-Video-Tutorial“

Das obige ist der detaillierte Inhalt vonSo stellen Sie das Element so ein, dass es sich in CSS immer dreht. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!