css3と擬似要素を使って、マウスを移動すると下線を両側に拡大する特殊効果コードを紹介します。

この記事では主に、CSS3+ 擬似要素を使用して、マウスが移動したときに下線が両側に展開される効果を実現するための関連情報を紹介します。この記事では、最初に誰もが理解しやすいように詳細に紹介し、次に完全なサンプルコードを提供します。必要な方はぜひ参考にして学んでください。

まずレンダリングを見てみましょう:

実装アイデア:

疑似要素 :before と :after を要素の下部の中央に配置します。幅を 0 ～ 100 % に設定して目標を達成します。

実装方法:

1. まずブロック要素を定義し(インライン要素には幅と高さはありません)、スタイルを明るい灰色の背景色の長方形に変更し、相対位置を設定します。

html code

<p id="underline"></p>

css style

#underline{

    width: 200px;

    height: 50px;

    background: #ddd;

    margin: 20px;

    position: relative;

}

2. 2 つの疑似要素を設定します: before と :after、背景色を青 (つまり、下線の色) に設定し、絶対位置を使用して 2 つの要素を固定します。 #underline の下中央まで。

cssスタイル

#underline:before,

#underline:after{

    content: "";/*单引号双引号都可以，但必须是英文*/

    width: 0;

    height: 3px; /*下划线高度*/

    background: blue; /*下划线颜色*/

    position: absolute;

    top: 100%;

    left: 50%;

    transition: all .8s ; /*css动画效果，0.8秒完成*/

}

3. マウスの移動効果を設定します。

css スタイル

#underline:hover:before{/*动画效果是从中间向左延伸至50%的宽度*/

    left:0%; 

    width:50%;

}

#underline:hover:after{/*动画效果是从中间向右延伸至50%的宽度*/

    left: 50%; /*这句多余，主要是为了对照*/

    width: 50%;

}

最適化

1. 目的は達成されていますが、2 つの疑似要素が使用され、1 つは左に 50% 拡張され、1 つは右に 50% 拡張され、1 つは 100 に拡張されます。 % 目標を達成できるでしょうか?

CSSコード

#underline:after{

    content: "";

    width: 0;

    height: 5px;

    background: blue;

    position: absolute;

    top: 100%;

    left: 50%;

    transition: all .8s;

}

#underline:hover:after{/*原理是left:50%变成0%的同时，宽度从0%变成100%*/

    left: 0%;

    width: 100%;

}

2. :after疑似要素のみを定義し、左から50%、幅0から左から0%、幅100%に変更することで目的を達成します。コードを合理化し、他の操作を容易にするための追加の :before があります。

完全なコード

    

    

    





    <p id="underline"></p>

以上がcss3と擬似要素を使って、マウスを移動すると下線を両側に拡大する特殊効果コードを紹介します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。