Kann mir bitte jemand diesen css code erklären

Hallo ich bin neu zu css und ich bin über diesen Text gelandet Animation unterstreichen, ich konnte nicht verstehen, wie es funktioniert. Wenn ich etwas aus diesem Code herausnehme, hört es einfach auf zu arbeiten. Danke im Voraus!Kann mir bitte jemand diesen css code erklären

body { 
 
    background-color: black; 
 
} 
 
body a { 
 
    font-weight: 200; 
 
    font-size: 18px; 
 
    text-transform: uppercase; 
 
    text-decoration: none; 
 
    position: relative; 
 
    color: #fff; 
 
} 
 
body a:visited { 
 
    color: white; 
 
} 
 
body a:hover { 
 
    color: white; 
 
} 
 
body a:after { 
 
    content: ""; 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    width: 0%; 
 
    border-bottom: 2px solid #fff; 
 
    transition: 0.4s; 
 
} 
 
body a:hover:after { 
 
    width: 100%; 
 
}

<body> 
 
<a href="#">aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</a> 
 
</body>

Quelle

2017-04-26 G. Rami

Was hier wirklich wichtig ist, sind die Pseudo-Elemente ": nach" und ": vor" (obwohl diese letzte präsentieren hier nicht).

Dieser Teil hier ist, was es zum Leben macht:

body a:after { 
    content: ""; 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 0%; 
    border-bottom: 2px solid #fff; 
    transition: 0.4s; 
}

Sie sehen, im Grunde sind Sie bei der Erklärung der Eigenschaften eines Elements Pseudo-Element suchen. (Vielleicht möchten Sie ein wenig in CSS-CSS3 eintauchen).

Es besagt, dass nach dem Auslösen des Hover-Ereignisses auf einem Anker, der ein Kind des Körpers ist, sein Pseudo-Element eine untere Grenze von 2 Pixel Breite mit einer weißen einfarbigen und einem Übergang von 0,4 Sekunden haben wird. Die anderen Deklarationen zeigen an, dass die Breite des Pseudo-Elements in seinem Anfangszustand 0% beträgt und nach dem Schweben auf 100% mit einem Übergang (so dass es von links nach rechts geht, wie im Beispiel zu sehen ist)).

Es gibt viele Dinge in diesem CSS-Code zu beachten, aber Sie sollten wirklich die Grundlagen lernen!

Quelle

2017-04-26 21:50:31

Ich sehe, aber was ist mit dem Inhalt, Position, unten und links, was haben diese Eigenschaften mit der Animation zu tun, wenn Sie irgendwelche herausnehmen von ihnen wird die Animation nicht sogar erscheinen! –

Diese Zeile erstellt die Animation: Übergang: 0,4 s;

Sie werden feststellen, dass der Körper a: Hover: nach Regel eine Breite von 100% hat. Nun, diese Übergangseigenschaft weist die Render-Engine an, dass eine Animation für jede Eigenschaft ausgeführt werden soll, deren Wert sich zwischen Normal- und Hover-Status ändert.

Wenn Sie den Mauszeiger bewegen, liest die Render-Engine, dass Sie die Eigenschaft width auf 100% setzen möchten. Vor dem Schweben wurde es auf 0% gesetzt. Transition sagt, "ok, bei Hover, animiere die width -Eigenschaft von 0 bis 100% über einen Zeitraum von 4/10 einer Sekunde.

Dies gilt für alle Eigenschaften, die sich zwischen dem Hover-Status und dem Status ohne Hover unterscheiden. mit anderen Worten, Sie könnten mehr als eine Eigenschaft zu einer Zeit animieren, solange die beiden Staaten die gleiche Eigenschaft mit unterschiedlichen Werten zu definieren.

Quelle

2017-04-26 21:52:04 Korgrue

ein :after psuedo CSS bedeuten, dass ein anderes „virtuelles“ Element nach dem ausgewählten Elemente angefügt wird

Das psuedo Element an a:after angefügt ist ein einfaches Element mit unten aber ist ohne Breite (0%)

die transition Eigenschaft auf dieses Element bedeutet, dass alle Eigenschaften dieses Elements, wenn

geändert wird animiert werden

so ...

, wenn Sie das Element schweben (angegeben in body a:hover:after) - die Breite von diesem "virtuellen" Element wird auf 100% gesetzt - und die Animation findet statt

Quelle

2017-04-26 21:55:30 levi

Kann mir bitte jemand diesen css code erklären

Antwort

Verwandte Themen