CSS3 の疑似要素は、マウスを移動したときに下線が両側にどのように拡張されるかを示す例を示しています。-CSSチュートリアル-php.cn

CSS3 の疑似要素は、マウスを移動したときに下線が両側にどのように拡張されるかを示す例を示しています。

巴扎黑

リリース： 2017-05-14 13:32:17

オリジナル

1804 人が閲覧しました

この記事では主に、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. 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 style

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

    left:0%; 

    width:50%;

}

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

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

    width: 50%;

}

ログイン後にコピー

最適化

1. 目的は達成されていますが、2 つの疑似要素が使用されています。1 つは左に 50% 拡張され、1 つは右に 50% 拡張され、1 つは 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 疑似要素のみを定義し、幅 0 の左 50% から幅 100% の左 0% に変更することで、次のようになります。単純化コードの目的であり、他の操作を容易にするために追加の :before があります。

完全なコード







    

    鼠标移入下划线展开

    






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

ログイン後にコピー

以上がCSS3 の疑似要素は、マウスを移動したときに下線が両側にどのように拡張されるかを示す例を示しています。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。