Heim >Web-Frontend >CSS-Tutorial >CSS3-Methode zum Zeichnen dynamischer Link-Unterstreichungen
CSS3-Methode zum Zeichnen dynamischer Link-Unterstreichungen
- 高洛峰Original
- 2017-03-07 14:19:101559Durchsuche
Link-Unterstreichung ist ein sehr verbreiteter Stil. Ich habe kürzlich einen sehr einfachen visuellen Effekt erstellt, der sehr gut ist.
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
body{
background-color: #000;
}
h2{
text-align: center;
margin-top: 100px;
}
h2 > a {
position: relative;
color: #FFF;
text-decoration: none;
padding-bottom: 5px;
}
h2 > a:hover {
color: #FFF;
}
h2 > a:before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: #FFF;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
h2 > a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
</style>
</head>
<body>
<h2>
<a href="/">悬停在我上面</a>
</h2>
</body>
</html>
Das Erstellen dieses Effekts ist sehr einfach. Es ist nicht erforderlich, zusätzliche DOM-Elemente zu HTML hinzuzufügen, Sie müssen jedoch Probleme mit der Browserkompatibilität berücksichtigen wird nur als einfache Unterstreichung angezeigt.
Okay, jetzt geht es offiziell los. Als erstes müssen wir die Textdekoration entfernen und den Link auf relative Positionierung einstellen. Wir müssen sicherstellen, dass der Link beim Schweben nicht seine Farbe ändert. Hier nehmen wir h2 als Beispiel:
h2 > a {
position: relative;
color: #000;
text-decoration: none;
}
h2 > a:hover {
color: #000;
}
Als nächstes müssen wir einen Rahmen hinzufügen und ihn durch Transformation ausblenden . Fügen Sie ein :before ein und setzen Sie dessen ScaleX (0). Um konservativ zu sein: Wenn der Browser es nicht unterstützt, blenden wir es mit „visibility:hidden“ aus.
h2 > a:before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottombottom: 0;
left: 0;
background-color: #000;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}Stellen Sie abschließend die Animationszeit auf 0,3 Sekunden ein. Jetzt müssen wir nur noch das Element festlegen, das beim Schweben angezeigt werden soll, und ScaleX(1):
h2 > a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
Fertig!
Damit ist eine sehr dynamische Unterstreichungsanimation abgeschlossen.
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er zum Lernen aller beiträgt. Ich hoffe auch, dass jeder die PHP-Chinesisch-Website unterstützt.
Weitere Artikel zu CSS3-Methoden zum Zeichnen dynamischer Link-Unterstreichungen finden Sie auf der chinesischen PHP-Website!