CSS3を使用してホバー下線アニメーションを作成する方法

この記事ではCSS3でホバー下線アニメーションを作成する手順を中心に紹介します。非常に良い基準値を持っています。以下のエディターで見てみましょう

1. 数日前、Hexo の next テーマタイトルのホバーエフェクトがとてもクールだったので、自分で書いてみました。もう 1 つは next の実装です。いつものように、最初に画像を示します

2. リトルブラックテクノロジー

 <!-- html结构 -->
 <p>
     <a>自己实现的hover效果</a>
 </p>

/* css样式 */
        .demo1{
            position: relative;
            text-decoration: none;
            font-size: 20px;
            color: #333;
        }
        .demo1:before{
            content: "";
            position: absolute;
            left: 50%;
            bottom: -2px;
            width: 0;
            height: 2px;
            background: #4285f4;
            transition: all .3s;
        }
        .demo1:hover:before{
            width: 100%;
            left: 0;
            right: 0;
        }

を実装するための鍵は、ホバーがないときに幅を0として定義し、幅を0から〜に変更できるようにすることです。 100%。

左は50%、アニメーションの開始位置を50%にするのが目的です。

3. hexo next テーマの正式実装

<!-- html结构 -->
<p>
    <a>Hexo next主题的实现</a>
</p>

/* css样式 */
        .demo2{
            position: relative;
            text-decoration: none;
            font-size: 20px;
            color: #333;
        }
        .demo2:before{
            content: "";
            position: absolute;
            left: 0;
            bottom: -2px;
            height: 2px;
            width: 100%;
            background: #4285f4;
            transform: scale(0);
            transition: all 0.3s;
        }
        .demo2:hover:before{
            transform: scale(1);
        }

この実装の鍵は、scale(0) からscale(1) への変更です。

CSS3のスケール変換の原点は中点なので、アニメーションは真ん中の位置から始まります。

4. 次のアニメーションでは、スケールの表現に関連する透明なグラデーション効果が見られます。

最初の実装は幅のみを変更しますが、アニメーションを使用して次と同じ効果を実現することもできます。

以上がCSS3を使用してホバー下線アニメーションを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。