マウス移動時に下線を左右に展開できるようにする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. 目的は達成されていますが、左に50%拡張したものと右に50%拡張したものという2つの疑似要素が使用されています。毛織物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>

関連する推奨事項:

JavaScriptは、Lagou.comと同様のマウスの移動インおよび移動アウト効果を実装します

インターレースカラー変更、マウス移動ハイライトを実現する純粋なJSコード

JavaScriptテーブルのインターレースカラー変更とマウスの移動と移動とクリック効果メソッド_JavaScriptスキル

以上がマウス移動時に下線を左右に展開できるようにするCSS3と擬似要素の詳細解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。