ホームページ > 記事 > ウェブフロントエンド > 動的リンクの下線を引くCSS3メソッド
リンクの下線は非常に一般的なスタイルで、非常に優れたシンプルな視覚効果を作成しました。完全なコードを確認してください。
<!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 サイトに注目してください。