ホームページ  >  記事  >  ウェブフロントエンド  >  動的リンクの下線を引くCSS3メソッド

動的リンクの下線を引くCSS3メソッド

高洛峰
高洛峰オリジナル
2017-03-07 14:19:101532ブラウズ

リンクの下線は非常に一般的なスタイルで、非常に優れたシンプルな視覚効果を作成しました。完全なコードを確認してください。

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

この効果の作成は非常に簡単で、HTML に DOM 要素を追加する必要はありませんが、ブラウザの互換性の問題を考慮する必要があります。古いバージョンのブラウザでは、通常のアンダースコアが 1 つしか表示されません。

さて、いよいよ正式に始まります。最初に行う必要があるのは、テキスト装飾を削除し、リンクを相対位置に設定することです。ここでは、h2 を例として取り上げます:

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

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

次に、境界線を追加し、変換によってそれを非表示にする必要があります。 :before を挿入し、scaleX (0) に設定します。ブラウザがサポートしていない場合は、visibility: hidden で非表示にします。

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

最後にアニメーション時間を 0.3 秒に設定します。あとは、ホバーとスケール X(1) に表示する要素を設定するだけです。

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

これで完了です。

このようにして、とてもダイナミックな下線アニメーションが完成しました。

以上がこの記事の全内容です。皆さんの学習に役立つことを願っています。また、皆さんも PHP 中国語 Web サイトをサポートしていただければ幸いです。

CSS3 でダイナミック リンクの下線を描画する方法に関連するその他の記事については、PHP 中国語 Web サイトに注目してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。