Ausführliche Erklärung von CSS3 und Pseudoelementen, damit sich die Unterstreichung beim Hineinbewegen der Maus nach beiden Seiten ausdehnen kann

In diesem Artikel werden hauptsächlich relevante Informationen zur Verwendung von CSS3 + -Pseudoelementen vorgestellt, um den Effekt der Unterstreichungserweiterung nach beiden Seiten zu erzielen, wenn die Maus hinein bewegt wird. Der Artikel enthält zunächst eine detaillierte Einführung, um das Verständnis für alle zu erleichtern, und bietet dann eine vollständige Beschreibung Beispielcode, auf den sich jeder beziehen und den er lernen kann. Freunde, die ihn benötigen, kommen bitte zum gemeinsamen Lernen. Hoffe es hilft.

Werfen wir zunächst einen Blick auf die Renderings:

Implementierungsidee:

Pseudoelemente platzieren: davor und: After wird in der Mitte der Unterseite des Elements positioniert und legt die Breite von 0 bis 100 % fest, um das Ziel zu erreichen.

Implementierungsmethode:

1. Definieren Sie zunächst ein Blockelement (Inline-Elemente haben keine Breite und Höhe), ändern Sie den Stil in ein Rechteck mit einer hellgrauen Hintergrundfarbe und legen Sie die relative Positionierung fest.

HTML-Code

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

CSS-Stil

#underline{

    width: 200px;

    height: 50px;

    background: #ddd;

    margin: 20px;

    position: relative;

}

2. Legen Sie zwei Pseudoelemente fest: before und :after, und setzen Sie ihre Hintergrundfarbe auf Blau (das heißt , die Farbe der Unterstreichung), verwenden Sie die absolute Positionierung, um die beiden Elemente an der unteren mittleren Position von #underline zu fixieren.

CSS-Stil

#underline:before,

#underline:after{

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

    width: 0;

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

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

    position: absolute;

    top: 100%;

    left: 50%;

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

}

3. Legen Sie den Mausbewegungseffekt fest.

CSS-Stil

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

    left:0%; 

    width:50%;

}

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

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

    width: 50%;

}

Optimierung

1 Obwohl der Zweck erreicht wird, werden zwei Pseudoelemente verwendet, eines erstreckt sich 50 % nach links und eines erstreckt sich nach links richtig 50 %, kann nur eine Erweiterung auf 100 % das Ziel erreichen?

CSS-Code

#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. Definieren Sie nur das :after-Pseudoelement und ändern Sie es von einer Breite von 50 % von links auf eine Breite von 0 bis a Eine Breite von 0 % von links kann erreicht werden, wodurch der Zweck der Optimierung des Codes erreicht wird, und es gibt ein Extra: vor, um andere Vorgänge zu erleichtern.

Vollständiger Code

    

    

    





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

Verwandte Empfehlungen:

JavaScript implementiert den Mausbewegungseffekt ähnlich wie bei Lagou.com

Reiner JS-Code, um interlaced-Farbwechsel, Mausbewegung nach innen und Hervorhebung zu erreichen

So verwenden Sie eine Javascript-Tabelle, um die Farbe in alternativen Zeilen zu ändern und Mausbewegung nach innen und außen hinzuzufügen Klicken Sie auf effect_javascript skills

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung von CSS3 und Pseudoelementen, damit sich die Unterstreichung beim Hineinbewegen der Maus nach beiden Seiten ausdehnen kann. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!