Heim > Artikel > Web-Frontend > CSS3-Methode zum Zeichnen dynamischer Link-Unterstreichungen

CSS3-Methode zum Zeichnen dynamischer Link-Unterstreichungen

高洛峰Original: 2017-03-07 14:19:101518Durchsuche

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!

Stellungnahme：

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

Vorheriger Artikel：Detaillierte Einführung in den Unterschied zwischen Inline-Elementen und Elementen auf BlockebeneNächster Artikel：Detaillierte Einführung in den Unterschied zwischen Inline-Elementen und Elementen auf Blockebene

In Verbindung stehende Artikel

Mehr sehen