CSS3-Methode zum Zeichnen dynamischer Link-Unterstreichungen-CSS-Tutorial-php.cn

CSS3-Methode zum Zeichnen dynamischer Link-Unterstreichungen

高洛峰

Freigeben： 2017-03-07 14:19:10

Original

1511 Leute haben es durchsucht

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>

Nach dem Login kopieren

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;   
}

Nach dem Login kopieren

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;   
}

Nach dem Login kopieren

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);   
}

Nach dem Login kopieren

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!