Einführung eines Spezialeffektcodes, der CSS3 und Pseudoelemente verwendet, um die Unterstreichung nach beiden Seiten zu erweitern, wenn die Maus nach innen bewegt wird.

In diesem Artikel werden hauptsächlich relevante Informationen zur Verwendung von CSS3 + -Pseudoelementen vorgestellt, um den Effekt zu erzielen, dass Unterstreichungen beim Bewegen der Maus nach beiden Seiten erweitert werden. Der Artikel stellt es zunächst ausführlich vor, um das Verständnis für alle zu erleichtern, und bietet dann eine vollständige Beschreibung Beispielcode, auf den sich jeder beziehen kann. Wenn Sie ihn brauchen, kommen Sie und lernen Sie gemeinsam.

Werfen wir zunächst einen Blick auf die Renderings:

Implementierungsidee:

Positionieren Sie die Pseudoelemente :before und :after in der Mitte des unteren Teils des Elements und stellen Sie die Breite von 0 bis 100 % ein, um das zu erreichen Ziel.

Implementierungsmethode:

1 Definieren Sie zunächst ein Blockelement (Inline-Elemente haben keine Breite und Höhe) und ändern Sie den Stil in einen Hintergrund Farbe des hellgrauen Rechtecks, relative Positionierung festlegen.

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 Mittelposition 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 wurde, wurden zwei Pseudoelemente verwendet. Einer erstreckt sich um 50 % nach links und der andere um 50 % nach rechts. Kann nur einer auf 100 % erweitert werden, um das Ziel zu 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 50 % nach links mit einer Breite von 0 auf 0 % vom Eine Breite von 100 % kann erreicht werden, wodurch der Zweck der Optimierung des Codes erreicht wird, und es gibt ein zusätzliches :before, um andere Vorgänge zu erleichtern.

Vollständiger Code

    

    

    






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

Das obige ist der detaillierte Inhalt vonEinführung eines Spezialeffektcodes, der CSS3 und Pseudoelemente verwendet, um die Unterstreichung nach beiden Seiten zu erweitern, wenn die Maus nach innen bewegt wird.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!