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

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

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

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

<!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 までご連絡ください。

前の記事：インライン要素とブロックレベル要素の違いの詳細な紹介次の記事：インライン要素とブロックレベル要素の違いの詳細な紹介

続きを見る

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

関連記事