Implementierung der dynamischen Blasenschaltfläche für HTML5 und CSS3

Wir erstellen einen nützlichen Satz animierter Schaltflächen mit der Leistungsfähigkeit mehrerer Hintergründe und Animationen in CSS3, ohne JavaScript zu verwenden. Mit diesem Schaltflächenpaket können Sie ganz einfach alles auf Ihrer Webseite in eine animierte Schaltfläche umwandeln. Der Link gibt lediglich eine Klasse an Name, Freunde, die es brauchen, können sich an

wenden. Dieses Mal erstellen wir eine nützliche Einstellung, um Schaltflächen mit der Kraft mehrerer Hintergründe und Animationen von CSS3 zu animieren. Mit diesem Schaltflächenpaket können Sie jeden Link auf Ihrer Webseite ganz einfach in eine animierte Schaltfläche umwandeln, indem Sie einfach einen Klassennamen angeben. Kein JavaScript erforderlich. Durch die Zuweisung zusätzlicher Klassennamen sind außerdem vier Farbthemen und drei Größen verfügbar.
Um einen regulären Link auf einer Webseite in eine schicke animierte CSS3-Schaltfläche umzuwandeln, müssen Sie lediglich die Schaltflächenklasse und eine der unterstützten Farben angeben. Nachfolgend finden Sie einige Beispiele:

<a href="#" class="button blue big">Download</a> 
<a href="#" class="button blue medium">Submit</a> 
<a href="#" class="button small blue rounded">Submit</a>

hat vier Farbklassen – Blau, Grün, Orange und Grau. Die übrigen Kurse, die Sie über den obigen Link sehen, sind optional. Sie können zwischen kleinen, mittleren und großen Größen sowie einer Kategorie – „Abgerundet“ – wählen, die eine abgerundetere Version der Schaltfläche erstellt.
Effektdemonstration
Es wird empfohlen, Standardbrowser wie Chrome und Firefox zu verwenden, um den Effekt anzuzeigen. Sogar IE 9 weist einige Inkompatibilitäten auf.

Der CSS-Code für alle animierten Schaltflächen befindet sich in „buttons.css“. Dadurch ist es einfach, in ein bestehendes Projekt einzusteigen und es zu verwenden.
Bitte beachten Sie, dass ich im folgenden Code an einigen Stellen zwei Versionen derselben Eigenschaft definiert habe. Dies hängt mit der Art und Weise zusammen, wie Browser mit CSS-Definitionen umgehen. Sie analysieren die Regeln eine nach der anderen und wenden sie an, wobei sie ignorieren, was sie nicht verstehen. Auf diese Weise können wir alle Regeln verstehen, die die normale Version darstellen, und eine CSS3-fähige Version, die die alten ignoriert.
Als erstes müssen wir die Schaltflächenklasse definieren. Dies ist das Rückgrat der Schaltfläche, da sie Positionierung, Schriftarten und Hintergrundstile anwendet.
Der erste ist der Stil, der sich auf die Schriftart bezieht, danach werden die Eigenschaften wie folgt angezeigt. Es ist als Inline-Block eingerichtet, wodurch es in derselben Zeile wie der Text um ihn herum platziert werden kann (wie ein Inline-Element), aber auch wie ein Aspektblock mit Auffüllung und Rändern.
Irgendwann werden Sie sehen, dass auf jede Schaltfläche vier Hintergrundbilder angewendet werden. Auch wenn das beängstigend klingt, wird tatsächlich nur eine Datei vom Server angefordert. Die ersten beiden Hintergründe, die Teilblasenbilder unten links und oben rechts, die Sie in der Abbildung unten sehen können, und die anderen beiden sind reine CSS-Verläufe.
Wie oben erwähnt, wird der Hintergrund der Blase als zwei separate Bilder angezeigt, die um die Eigenschaft „Hintergrundposition“ versetzt sind. Mithilfe der CSS3-Übergangseigenschaft haben wir Animationen definiert, bei denen beide Versionen des Hintergrundbilds oben oder unten auf der Folie angezeigt werden, sodass ein Blaseneffekt entsteht, wenn Sie die Schaltfläche schweben sehen.

/* BlueButton */ 
.blue.button{ 
color:#0f4b6d !important; 
border:1px solid #84acc3 !important; 
/* A fallback background color */ 
background-color: #48b5f2; 
/* Specifying a version with gradients according to */ 
background-image: url('button_bg.png'), url('button_bg.png'), 
-moz-radial-gradient( center bottom, circle, 
rgba(89,208,244,1) 0,rgba(89,208,244,0) 100px), 
-moz-linear-gradient(#4fbbf7, #3faeeb); 
background-image: url('button_bg.png'), url('button_bg.png'), 
-webkit-gradient( radial, 50% 100%, 0, 50% 100%, 100, 
from(rgba(89,208,244,1)), to(rgba(89,208,244,0))), 
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#4fbbf7), to(#3faeeb)); 
} 
.blue.button:hover{ 
background-color:#63c7fe; 
background-image: url('button_bg.png'), url('button_bg.png'), 
-moz-radial-gradient( center bottom, circle, 
rgba(109,217,250,1) 0,rgba(109,217,250,0) 100px), 
-moz-linear-gradient(#63c7fe, #58bef7); 
background-image: url('button_bg.png'), url('button_bg.png'), 
-webkit-gradient( radial, 50% 100%, 0, 50% 100%, 100, 
from(rgba(109,217,250,1)), to(rgba(109,217,250,0))), 
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#63c7fe), to(#58bef7)); 
}

Jede Farbklasse definiert einen einzigartigen Satz einzigartiger Eigenschaften – die Farbe der Textbeschriftung, des Textschattens und des Hintergrundbilds der Schaltfläche. Beachten Sie, dass wir die Eigenschaftsschaltfläche „Hintergrund“ verwendet haben, um mehrere Bilder hinzuzufügen. Sie stehen an der Spitze der Hierarchie, erscheinen zuerst und werden oben definiert.
Derzeit unterstützen nur Mozilla- und Webkit-Browser CSS-Verläufe, allerdings mit völlig anderer Syntax. Die übrigen Browser zeigen die Ersatzhintergrundfarbe an. Möglicherweise ist Ihnen aufgefallen, dass wir in der kostenlosen Version der Verlaufsregeln kein Präfix eingefügt haben. Dies liegt daran, dass Farbverläufe noch nicht offiziell Teil einer CSS-Spezifikation sind und es kein bevorzugtes Syntaxprotokoll gibt.
Im Snippet oben können Sie sehen, dass wir einen linearen Farbverlauf und darüber einen radialen Farbverlauf definiert haben. Damit der Farbverlauf reibungsloser mit der WebKit- und Mozilla-Syntax übergeht, definieren wir eines der RGBA-Radiale, wodurch die äußere Farbe des Farbverlaufs vollständig transparent wird.
Damit ist unser animierter CSS3-Bubble-Button fertig!
Zusammenfassung
Diese Schaltflächen basieren vollständig auf CSS und die Integration ist sehr einfach – legen Sie den Schaltflächenordner einfach irgendwo in Ihrem Projekt ab. Durch Ändern von CSS-Dateien können Sie Ihre eigenen Farben und Formen erstellen.

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

Verwandte Empfehlungen:

H5-Funktionscode zum Implementieren des Hochladens lokaler Bilder und deren Vorschau

So richten Sie CSS ein Textschriftfarbe

Das obige ist der detaillierte Inhalt vonImplementierung der dynamischen Blasenschaltfläche für HTML5 und CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!