HTML5 タグ element_html/css_WEB-ITnose の下の下線アニメーション

最近、いくつかのブログ Web サイトでそのような効果を見たことがあります。ブログのヘッダーのタイトルにマウスを置くと、リンクの下線がアニメーションで最初から表示されると思います。興味深いことに、JD.com のホームページにこのエフェクトがあるようです。

このエフェクトの作成は非常に簡単で、追加する必要はありません。ページに DOM 要素を追加しますが、バージョンが低いです ブラウザは CSS アニメーションをサポートしていない可能性があります (通常は下線のみが表示される可能性があります)

最初に行う必要があるのは、a タグのテキスト装飾を削除することです。次に、ホバー状態での a タグの色の一貫性を確認します。この効果は、

コード名

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

次に、アニメーションを使用して境界線を追加し、疑似要素を挿入して完成させます。そのスケールを 0 に設定し、次に、visibility: hidden を設定して非表示にします。一部のブラウザは CSS アニメーションをサポートしていません。

コード名

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.3 秒で完了するように指示して変更します。アニメーション化するには、この要素をホバー状態で表示し、X スケーリングを 1 に設定するだけです:

コード名

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

We実際、最新バージョンでは、ブラウザの多くのプロパティにプレフィックスが必要なくなりました。

プログラマーはオンライン トレーニングを受けています。 🎜>

プログラマーの生活に溶け込み、彼らの思考パターン、喜び、悲しみ、楽しみを理解し、人々のプログラミングに注意を払います。