動的リンクの下線を引くCSS3メソッド-CSSチュートリアル-php.cn

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

高洛峰

リリース： 2017-03-07 14:19:10

オリジナル

1538 人が閲覧しました

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

<!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 サイトに注目してください。