CSSアニメーション:ダイナミック下線付きリンク

下線のリンクは最近、非常に単純な視覚効果は非常に良いですが、あなたは下のリンクを見ることができます作られた、非常に一般的なスタイルです。

http://jsbin.com/zanewe/edit?html,css,output

この効果を作成することは非常に簡単です、あなたはDOM HTMLに追加要素を追加する必要はありませんが、ブラウザの旧バージョンでは、ブラウザの互換性の問題を考慮する必要があり、それだけで通常の下線付きで表示されます。

まあ、今正式に開始。私たちが行う必要がある最初の事は、テキスト装飾を削除し、相対的な位置へのリンクを設定することです。私たちは、ホバー、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;
      bottom: 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.3s、今はただの要素が設定する必要がhover表示さscaleX(1)

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

私たちは完了です。??????

これは非常にダイナミックなアニメーションアンダースコアを完了します

おすすめ

転載: www.cnblogs.com/baimeishaoxia/p/12635886.html