Heim > Web-Frontend > CSS-Tutorial > CSS3-Implementierung der Beispielfreigabe für den Avatar-Rotationseffekt

CSS3-Implementierung der Beispielfreigabe für den Avatar-Rotationseffekt

小云云
Freigeben: 2017-12-19 13:11:51
Original
2833 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich der Effekt der Avatar-Rotation mit CSS3 vorgestellt. Der Herausgeber findet ihn recht gut, daher werde ich ihn jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

Der Effekt, wenn die Maus nicht platziert ist:

CSS3-Implementierung der Beispielfreigabe für den Avatar-Rotationseffekt

Der Rotationseffekt, wenn die Maus platziert ist:

CSS3-Implementierung der Beispielfreigabe für den Avatar-Rotationseffekt

Übergang: alle 2,0 Sekunden; bedeutet, dass alle Attributtransformationen innerhalb von 2 Sekunden abgeschlossen sind;

transformation: rotieren (360 Grad); bedeutet, dass das Bild um 360 Grad gedreht wird.

nbsp;html>

    
        <meta>
        <title></title>
        <style>
            img{
                border: #000 solid 2px;
                display: block;
                margin: 50px auto;
                border-radius: 50%;
                transition: all 2.0s;
            }
            img:hover{
                transform: rotate(360deg);
            }
        </style>
    
    
        <img  alt="CSS3-Implementierung der Beispielfreigabe für den Avatar-Rotationseffekt" >
    
Nach dem Login kopieren

Verwandte Empfehlungen;

Detaillierte Beispiele für HTML5 und CSS3 zur Erzielung von 3D-Konvertierungseffekten

Detaillierte Erläuterung von CSS- und HTML-Anpassung Definieren Sie den Kontrollkästcheneffekt

Über die Implementierungsmethode von CSS3, bei der mehrere Elemente den Effekt nacheinander anzeigen

Das obige ist der detaillierte Inhalt vonCSS3-Implementierung der Beispielfreigabe für den Avatar-Rotationseffekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage