Méthode CSS3 pour dessiner un soulignement de lien dynamique-tutoriel CSS-php.cn

Méthode CSS3 pour dessiner un soulignement de lien dynamique

高洛峰

Libérer： 2017-03-07 14:19:10

original

1511 Les gens l'ont consulté

Le soulignement de liens est un style très courant. J'ai récemment créé un effet visuel très simple, qui est très bon. Consultez le code complet.

<!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>

Copier après la connexion

La création de cet effet est très simple. Il n'est pas nécessaire d'ajouter des éléments DOM supplémentaires au HTML, mais vous devez prendre en compte les problèmes de compatibilité des navigateurs dans les anciens navigateurs. apparaîtra simplement comme un simple soulignement.

D'accord, maintenant ça commence officiellement. La première chose que nous devons faire est de supprimer la décoration du texte et de définir le lien sur un positionnement relatif. Nous devons nous assurer que le lien ne change pas de couleur lors du survol. Ici, nous prenons h2 comme exemple :

h2 > a {   
      position: relative;   
      color: #000;   
      text-decoration: none;   
}   

h2 > a:hover {   
      color: #000;   
}

Copier après la connexion

Ensuite, nous devons ajouter une bordure et la masquer par transformation. . Insérez un :before et définissez son scaleX (0). Pour être conservateur, si le navigateur ne le supporte pas, nous le masquons avec visible : caché.

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

Copier après la connexion

Enfin, réglez le temps d'animation sur 0,3 s. Il ne nous reste plus qu'à définir l'élément à afficher en survol et scaleX(1) :

h2 > a:hover:before {   
      visibility: visible;   
      -webkit-transform: scaleX(1);   
      transform: scaleX(1);   
}

Copier après la connexion

Fait !

Ceci complète une animation de soulignement très dynamique.

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'apprentissage de chacun. J'espère également que tout le monde soutiendra le site Web PHP chinois.

Pour plus d'articles liés aux méthodes CSS3 pour dessiner des soulignements de liens dynamiques, veuillez faire attention au site Web PHP chinois !