Erstellen Sie mit CSS3 eine rotierende Schaltfläche zum Ändern der Farbe

Dieser Artikel stellt hauptsächlich die Verwendung von CSS3 zum Erstellen einer rotierenden Farbänderungsschaltfläche vor. Jetzt kann ich ihn mit Ihnen teilen.

Ich möchte Besucher anleiten Zu einer anderen Seite hinzufügen? Der heutige Artikel schlägt vor, wie man mit CSS3 eine rotierende, rotierende und farbverändernde Schaltfläche erstellt.

Besucher auf eine andere Seite führen? Das Hinzufügen einer coolen Schaltfläche ist eine großartige Möglichkeit, dies zu tun. Der heutige Artikel schlägt vor, wie man mit CSS3 eine rotierende, rotierende und farbverändernde Schaltfläche erstellt.
Dies ist eine CSS3-Schaltfläche, die die Drehung demonstriert. Beginnen wir mit HTML:

<p> 
<a class="button">旋转按钮</a> 
</p>

und jetzt CSS:

.button 
{ 
background:#aaa; 
color:#555; 
font-weight:bold; 
font-size:15px; 
padding:10px 15px; 
border:none; 
margin:50px; 
cursor:pointer; 
-webkit-transition:-webkit-transform 1s,opacity 1s,background 1s,width 1s,height 1s,font-size 1s; 
-o-transition-property:width,height,-o-transform,background,font-size,opacity,color; 
-o-transition-duration:1s,1s,1s,1s,1s,1s,1s; 
-moz-transition-property:width, height, -moz-transform, background, font-size, opacity, color; 
-moz-transition-duration:1s,1s,1s,1s,1s,1s,1s; 
transition-property:width,height,transform,background,font-size,opacity; 
transition-duration:1s,1s,1s,1s,1s,1s; 
-webkit-border-radius:5px; 
border-radius:5px; 
box-shadow:0 0 2px rgba(0,0,0,0.5); 
text-shadow:0 0 5px rgba(255,255,255,0.5); 
display:inline-block; /*它是重要为按钮旋转*/ 
}

Hier sind die wichtigsten Code-Konvertierungseigenschaften, die durch Breite, Höhe, Hintergrund, Farbe definiert werden können. Transparenz usw. In diesem Beispiel ändert sich die Eigenschaft jede Sekunde entsprechend der Übergangszeiteigenschaft.
Übergang: Deckkraft 2s, Hintergrund 1s linear, Breite 1s, Höhe 1s, Schriftgröße 1s; >Die Schaltfläche wandelt das Element in eine 360-Grad-Drehung um, einen vollständigen Kreis. Der Rest des Codes ändert die Farbe und Schriftgröße.
Viel Spaß damit. Vielleicht könnten Sie es mit ein paar lustigen Feiertagsknöpfen nützlich machen. Vielleicht könnten Sie es sogar aktualisieren, um eine Schaltfläche zu drehen und das Bild von einem zum anderen zu ändern. Wer weiß? Die Möglichkeiten sind endlos

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Lernen aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der PHP-Chinesisch-Website.

Verwandte Empfehlungen:

CSS, um den Effekt von Text um Bilder zu erzielen

So verwenden Sie CSS3, um ein Rundschreiben zu implementieren Fortschrittsbalken

Verwenden Sie CSS3, um Graustufenfilter zu schreiben, um Schwarzweiß-Fotoeffekte zu erstellen

Das obige ist der detaillierte Inhalt vonErstellen Sie mit CSS3 eine rotierende Schaltfläche zum Ändern der Farbe. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!