Wie kann man Bilder in CSS3 kontinuierlich drehen lassen? 【Detaillierte Erklärung】

In diesem Artikel erfahren Sie ausführlich, wie Sie mit CSS3 den Effekt der kontinuierlichen Bildrotation erzielen. Beim Entwerfen von Webseiten treten häufig verschiedene Probleme im Zusammenhang mit der Bildanzeige auf . Eckanzeige, klicken Sie auf das Bild, um die Anzeige zu vergrößern und andere Effekte zu erzielen.

In meinem vorherigen Artikel habe ich Ihnen auch die spezifische Methode zum Anzeigen abgerundeter Ecken von Bildern vorgestellt. Sie können sich auch auf diesen Artikel beziehen [Wie steuere ich den zufälligen abgerundeten Eckenstil von Bildern mit CSS? 】

Im Folgenden wird hauptsächlich die spezifische Methode zur Verwendung von CSS3 vorgestellt, um eine automatische 360-Grad-Rotation von Bildern zu erreichen.

HTML-Codebeispiele lauten wie folgt:

<div class="demo">
    <img  class="an img" src="/test/img/2.png"    style="max-width:90%"  style="max-width:90%"/ alt="Wie kann man Bilder in CSS3 kontinuierlich drehen lassen? 【Detaillierte Erklärung】" >
</div>

CSS-Bild Das Animationscodebeispiel für die Drehung 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: 250px;}

Der obige Code kann zum Testen direkt kopiert und lokal eingefügt werden. Anschließend wird über den Browser darauf zugegriffen muss wie folgt aussehen:

Aufgrund der Größenbeschränkung für das Hochladen von Bildern wurde der GIF-Screenshot komprimiert, was dazu führen kann, dass das Bild nicht gedreht werden kann. Aber unter normalen Umständen dreht es sich entsprechend der angegebenen Zeitgeschwindigkeit. Wir sollten hier auf das Animationsattribut achten. Dieses Attribut ist das Abkürzungsattribut aller Animationsattribute. Wir haben dem IMG-Bild Transformations- und Animationsstilattribute hinzugefügt, sodass das Bild einen 360-Grad-Rotationsanimationseffekt erzielen kann.

Die Methode zum Erzielen des Effekts der automatischen Drehung von CSS-animierten Bildern ist wie oben beschrieben. Solange Sie die Transformations- und Animationseigenschaften in CSS beherrschen, können Sie die meisten Animationseffekte erzielen. Ihre Prinzipien sind grundsätzlich dieselben.

Dann ist das Obige die spezifische Methode zur Verwendung von CSS3, um den Animationseffekt zu erzielen, bei dem das Bild automatisch um 360 Grad gedreht wird. Es hat einen gewissen Referenzwert und ich hoffe, dass es Freunden in Not hilfreich sein wird!

Das obige ist der detaillierte Inhalt vonWie kann man Bilder in CSS3 kontinuierlich drehen lassen? 【Detaillierte Erklärung】. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!