💡 Dieser Artikel wurde von AI-Assistenten übersetzt. Um die englische Version anzuzeigen, können Sie hier klicken
In diesem Lab lernst du, wie du mit HTML und CSS3 animierte Soziale Teilen-Buttons erstellen kannst. Diese Buttons verwenden die Font Awesome Bibliothek für die Symbole und werden mit CSS gestaltet, um einen reibungslosen Hover-Übergangseffekt zu bieten. Am Ende dieses Leitfadens wirst du eine Reihe schöner, responsiver Soziale Buttons haben, die du in jede Website integrieren kannst.
Um Font Awesome Symbole zu verwenden, einfach den Präfix "fa" gefolgt vom Symbolnamen verwenden.
Das spezifische Format lautet wie folgt: <i class="fa ICON_NAME"></i>
Um die erforderlichen Symbole aus der Symbolbibliothek einzuführen, schreiben Sie folgenden Code in die index.html-Datei:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Animated Social Sharing Buttons</title>
<!--Icon Library-->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/css/font-awesome.min.css"
/>
</head>
<body>
<div>
<i class="fa fa-facebook"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-google"></i>
<i class="fa fa-instagram"></i>
<i class="fa fa-pinterest"></i>
</div>
</body>
</html>Das Ergebnis ist wie folgt:
Mit Hilfe von Pseudo-Klassen-Selektoren kann der Stil geändert werden, wenn die Maus über das verknüpfte Objekt schwebt. Daher fügen wir einen leeren Link zum Symbol hinzu, oder Sie können zu den jeweiligen sozialen Startseiten verlinken.
Pseudo-Klassen-Syntax: selector:pseudo-class {property:value;}
a:hover {property:value;} setzt den Stil, der angezeigt wird, wenn die Maus über dem Link schwebt.Setzen Sie die erforderlichen Klassen-Selektoren, um die anschließende Gestaltung der jeweiligen Buttons zu erleichtern.
<div class="social-btns">
<a class="btn facebook" href="#"><i class="fa fa-facebook"></i></a>
<a class="btn twitter" href="#"><i class="fa fa-twitter"></i></a>
<a class="btn google" href="#"><i class="fa fa-google"></i></a>
<a class="btn instagram" href="#"><i class="fa fa-instagram"></i></a>
<a class="btn pinterest" href="#"><i class="fa fa-pinterest"></i></a>
</div>Effekt-Vorschau:
Die Font Awesome Symbole werden blau, weil nach Anwendung des <a>-Tags die Standard-Schriftfarbe blau ist.
Bevor wir den Icon-Stil einstellen, fügen wir in der <head>-Tag von index.html die style.css-Stylesheet hinzu.
<link rel="stylesheet" href="style.css" />Um den gesamten Stil zu standardisieren, legen wir in style.css einen globalen Stil fest.
/* Global style settings */
* {
margin: 0;
padding: 0;
}
a,
img {
border: 0;
}
body {
background: #eee;
}Um die von der Font Awesome-Schrift bereitgestellten Vektorgrafiken zu verschönern, setzen wir zunächst ihre Farben.
.social-btns.btn.facebook.fa {
color: #3b5998;
}
.social-btns.btn.twitter.fa {
color: #00aff0;
}
.social-btns.btn.google.fa {
color: #dc4a38;
}
.social-btns.btn.instagram.fa {
color: #bf00ff;
}
.social-btns.btn.pinterest.fa {
color: #cc0000;
}Effekt-Vorschau:
Als nächstes setzen wir das Icon, sodass es sofort vergrößert wird, wenn es berührt wird, und seine Farbe ändert. Für den sofortigen Vergrößerungseffekt können wir transform: scale(0.8) verwenden, um das Icon auf 80% seiner ursprünglichen Größe zu verkleinern, und wenn das Berührungsevent auftritt, wird es mit transform: scale(1) wieder auf seine ursprüngliche Größe vergrößert.
Geben Sie folgenden Code in die style.css-Datei ein:
.social-btns.btn.fa {
/* Set the default link display style */
-webkit-transform: scale(0.8);
transform: scale(0.8);
}
.social-btns.btn:focus.fa, /* Select the focused button style */
.social-btns.btn:hover.fa {
/* Set the mouse-over link display style */
color: #fff; /* Change its color */
-webkit-transform: scale(1);
transform: scale(1);
}
.social-btns.btn.fa {
/* Set the size and vertical alignment of the icons provided by Font Awesome */
font-size: 38px;
vertical-align: middle;
}Effekt-Vorschau:
Um die Seite zu layouten, zentrieren wir die Buttons auf der Seite, setzen sie als block-level inline-Elemente und verschönern dann die Buttons.
Das display-Attribut bestimmt den Typ des zu erzeugenden Elements:
display:inline setzt es als Inline-Element, das sich mit anderen Elementen in einer Zeile teilt, d.h. es nimmt nicht ausschließlich eine Zeile ein.display:block setzt es als block-level-Element, das ausschließlich eine Zeile einnimmt.display:inline-block kombiniert die obigen beiden Methoden, um es als block-level-Element zu setzen, das nicht ausschließlich eine Zeile einnimmt..social-btns {
height: 90px;
margin: 80px auto;
font-size: 0;
text-align: center; /* horizontal zentrieren */
}
.social-btns.btn {
display: inline-block; /* setze den Button als block-level-Element, das nicht ausschließlich eine Zeile einnimmt */
background-color: #fff;
width: 90px;
height: 90px;
line-height: 90px; /* setze die Zeilenhöhe */
margin: 0 10px;
text-align: center;
position: relative; /* setze auf relative Positionierung */
overflow: hidden; /* verstecke überlaufendes Inhalt */
border-radius: 28%; /* runde die Ecken des DIVs */
box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.1); /* füge einer Schatten zum DIV-Element hinzu */
opacity: 0.99; /* spezifiziere die Opazität. Von 0.0 transparent bis 1.0 vollständig undurchsichtig */
}Effekt-Vorschau:
Wir stellen fest, dass wenn der Button berührt wird, sowohl das Icon als auch der Button-Hintergrund weiß sind, was nicht gut zu erkennen ist. Daher müssen wir den Berührstil des Button-Hintergrunds einstellen. Zunächst müssen wir btn:before um 45° im Uhrzeigersinn rotieren, indem wir transform: rotate(45deg) verwenden. Dann passen wir die Anfangs- und Endpositionen von btn:before an.
before-Selector: Fügt neues Inhalt vor dem Inhalt des Elements ein.
.social-btns.btn:before {
/*Setze die oberen und linken Werte vor dem Inhalt jedes btn-Elements, d.h. die Position des btn, wenn es nicht berührt wird*/
top: 90%;
left: -110%;
}
.social-btns.btn:focus:before,
.social-btns.btn:hover:before {
/*Passt die Position des Buttons an, wenn er berührt wird*/
top: -10%;
left: -10%;
}
.social-btns.btn:before {
content: "";
width: 120%;
height: 120%;
position: absolute;
/*Dreht btn:before um 45° im Uhrzeigersinn*/
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
/*Setze die btn:before-Farbe, d.h. die Button-Hintergrundfarbe nach dem Berühren*/
.social-btns.btn.facebook:before {
background-color: #3b5998;
}
.social-btns.btn.twitter:before {
background-color: #00aff0;
}
.social-btns.btn.instagram:before {
background-color: #bf00ff;
}
.social-btns.btn.google:before {
background-color: #dc4a38;
}
.social-btns.btn.pinterest:before {
background-color: #cc0000;
}Effekt-Vorschau:
Schließlich machen wir Übergangsanpassungen an den Buttons, hauptsächlich indem wir das transition-timing-function-Attribut verwenden, um die Geschwindigkeitskurve des Übergangseffekts festzulegen, um ihn visuell glatter zu machen.
transition-timing-function-Syntax:
<cubic-bezier-easing-function> =
ease |
ease-in |
ease-out |
ease-in-out |
cubic-bezier( <number [0,1]>, <number>, <number [0,1]>, <number> )Fügen Sie die folgende Stilangabe zu style.css hinzu:
.social-btns.btn,
.social-btns.btn:before,
.social-btns.btn.fa {
transition: all 0.35s; /* alle Stile 0,35 Sekunden easing */
transition-timing-function: cubic-bezier(
0.31,
-0.105,
0.43,
1.59
); /* spezifiziert die Geschwindigkeit des Übergangseffekts */
}Effekt-Vorschau:
Hinweis: Klicken Sie bitte in der unteren rechten Ecke auf 'Go Live', um den Webdienst auf Port 8080 auszuführen. Anschließend können Sie die Registerkarte Web 8080 aktualisieren, um die Webseite anzuschauen.
Wissenserweiterung
Wir können nicht nur den Effekt beim Hovern über einen Hyperlink einstellen, sondern auch mit Hilfe von Pseudo-Klassen-Selektoren Effekte für nicht besuchte, besuchte und ausgewählte Hyperlinks einstellen.
a:link {attribute: value;} setzt den Effekt für nicht besuchte Hyperlinks.a:visited {attribute: value;} setzt den Effekt für besuchte Hyperlinks.a:active {attribute: value;} setzt den Effekt für ausgewählte Hyperlinks.In diesem Lab haben wir Folgendes gelernt:
In diesem Lab wird CSS verwendet, um ein statisches Symbol in einen Button mit dynamischen Effekten zu transformieren. CSS kann nicht nur eine einheitliche Stilgebung für wiederkehrende Stile vornehmen, um die Effizienz der Webentwicklung zu verbessern, sondern auch verschiedene Elemente gemäß den Anforderungen der Webseite einrichten, um das Ziel der Verfeinerung der Webseite zu erreichen und das Benutzererlebnis zu verbessern.
