Heim >Web-Frontend >CSS-Tutorial >Fancy -Menünavigation mit Ankerpositionierung
Fancy -Menünavigation mit Ankerpositionierung
- Joseph Gordon-LevittOriginal
- 2025-03-07 17:14:13938Durchsuche
Ich glaube, Sie haben von der CSS -Ankerpunktpositionierungsfunktion gehört, oder? Mit dieser Funktion können Sie jedes Element auf der Seite mit einem anderen Element, dem Ankerpunkt, verknüpfen. Es ist sehr nützlich für alle Tooltips, aber es schafft auch viele andere gute Ergebnisse.
In diesem Artikel wird die Menünavigation untersucht, und ich stütze mich auf die Ankerpositionierung, um hervorragende Schwebeffekte auf Links zu erzielen.
Es ist cool, oder? Wir haben einen Gleiteffekt, das blaue Rechteck passt sich perfekt an den Textgehalt durch einen reibungslosen Übergang an. Wenn Sie mit der Ankerpositionierung nicht vertraut sind, ist dieses Beispiel perfekt für Sie, da es einfach ist und Ihnen die Grundlagen dieser neuen Funktion bietet. Wir werden ein weiteres Beispiel lernen, also bleiben Sie am Ende!
Beachten Sie, dass nach diesem Schreiben nur Browser auf Chrombasis die Ankerpositionierung vollständig unterstützen. Bevor andere Browser diese Funktion stärker unterstützen können, müssen Sie die Demo in Browsern wie Chrome oder Edge anzeigen.
Beginnen wir mit der HTML -Struktur, die nur ein Navigationselement ist, das eine nicht ordnungsgemäße Linkliste enthält:
<nav><ul>
<li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Home</a></li>
<li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">About</a></li>
<li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Projects</a></li>
<li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Blog</a></li>
<li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Contact</a></li>
</ul></nav>
Wir werden nicht viel Zeit damit verbringen, diese Struktur zu erklären, da sie möglicherweise auch unterschiedlich sein kann, wenn Ihre Anwendungsfälle unterschiedlich sind. Stellen Sie nur sicher, dass die Semantik mit dem zusammenhängt, was Sie versuchen. Was den CSS -Abschnitt betrifft, beginnen wir mit einigen grundlegenden Stilen, um eine horizontale Menünavigation zu erstellen.
ul {
padding: 0;
margin: 0;
list-style: none;
display: flex;
gap: .5rem;
font-size: 2.2rem;
}
ul li a {
color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b000;
text-decoration: none;
font-weight: 900;
line-height: 1.5;
padding-inline: .2em;
display: block;
}
bisher nichts Besonderes. Wir haben einige Standardstile entfernt und Flexbox verwendet, um die Elemente horizontal auszurichten.
gleitende Effekt
Lassen Sie uns zunächst verstehen, wie der Effekt funktioniert. Auf den ersten Blick scheint es, dass wir ein Rechteck haben, das auf eine sehr kleine Höhe schrumpft, sich zu einem Schwebelement bewegt und dann in voller Höhe wächst. Dies ist der visuelle Effekt, aber in Wirklichkeit sind mehrere Elemente beteiligt!
Dies ist meine erste Demonstration, und ich verwende verschiedene Farben, um besser zu verstehen, was los ist.
Jeder Menüelement hat sein eigenes "Element", das schrumpfen oder wachsen kann. Dann haben wir ein gemeinsames "Element" (das in Rot), das zwischen verschiedenen Menüelementen gleitet. Der erste Effekt erfolgt unter Verwendung von Hintergrundanimationen, und der zweite Effekt ist, wo die Ankerpunktpositionierung ins Spiel kommt!
Hintergrundanimation
Für den ersten Teil werden wir die Höhe des CSS -Gradienten animieren:
/* 1 */
ul li {
background:
conic-gradient(lightblue 0 0)
bottom/100% 0% no-repeat;
transition: .2s;
}
/* 2 */
ul li:is(:hover,.active) {
background-size: 100% 100%;
transition: .2s .2s;
}
/* 3 */
ul:has(li:hover) li.active:not(:hover) {
background-size: 100% 0%;
transition: .2s;
}
Wir definieren einen Gradienten mit einer Breite von 100% und einer Höhe von 0% unten. Die Gradientensyntax mag seltsam aussehen, aber es ist die kürzeste Syntax, die es mir ermöglicht, einen monochromen Gradienten zu haben.
verwandt: "Wie man den Monochromgradienten richtig definiert"
Wenn der Menüelement dann schwebt oder über eine .aktive Klasse verfügt, setzen wir die Höhe auf 100%. Bitte beachten Sie hier die Verwendung von Verzögerungen, um sicherzustellen, dass das Wachstum nach dem Schrumpfung auftritt.
Schließlich müssen wir uns mit besonderen Fällen von .aktiven Gegenständen befassen. Wenn wir einen Artikel (nicht das aktive Element) schweben, erhält das .aktive Element einen schrumpfenden Effekt (die Gradientenhöhe entspricht 0%). Dies ist, was der dritte Selektor im Code tut.
Unsere erste Animation ist fertig! Beachten Sie, wie das Wachstum nach Abschluss der Kontraktion aufgrund der im zweiten Selektor definierten Verzögerung beginnt. Ankerpositionierungsanimation
Die erste Animation ist sehr einfach, da jedes Projekt über eine eigene Hintergrundanimation verfügt, was bedeutet, dass wir uns nicht um den Textinhalt kümmern müssen, da der Hintergrund automatisch den gesamten Speicherplatz füllt.
Wir werden ein Element verwenden, um eine zweite Animation durchzuführen, die zwischen allen Menüelementen rutscht, während die Breite an den Text jedes Elements angepasst wird. Hier kann uns die Ankerpositionierung helfen.
Beginnen wir mit dem folgenden Code:
Um zusätzliche Elemente hinzuzufügen, bevorzuge ich Pseudo-Elemente für UL. Es sollte absolut positioniert sein, und wir werden uns auf zwei Eigenschaften verlassen, um die Ankerpositionierung zu aktivieren.
<nav><ul>
<li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Home</a></li>
<li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">About</a></li>
<li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Projects</a></li>
<li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Blog</a></li>
<li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Contact</a></li>
</ul></nav>
Wir verwenden das Ankername-Attribut, um den Ankerpunkt zu definieren. Wenn ein Menüelement schwebt oder eine .aktive Klasse hat, wird es zu einem Ankerelement. Wenn ein anderer Element schwebt, müssen wir auch den Ankerpunkt aus dem .aktiven Element (so den letzten Selektor im Code) entfernen. Mit anderen Worten, es wird jeweils nur ein Ankerpunkt definiert.
Dann verwenden wir das Positionsankursattribut, um die Pseudoelement mit dem Ankerpunkt zu verknüpfen. Beachten Sie, wie die beiden dieselbe Notation verwenden - -li. Dies ähnelt zum Beispiel, wie wir @KeyFrames mit einem bestimmten Namen definieren und ihn dann in der Animationseigenschaft verwenden. Denken Sie daran, dass Sie die
-Syntax verwenden müssen, was bedeutet, dass der Name immer mit zwei Strichen (-) beginnen muss.
Das
Höhenattribut ist einfach, aber Anchor () ist ein neues Mitglied. Hier ist, was Juan Diego in Almanach beschreibt:ul {
padding: 0;
margin: 0;
list-style: none;
display: flex;
gap: .5rem;
font-size: 2.2rem;
}
ul li a {
color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b000;
text-decoration: none;
font-weight: 900;
line-height: 1.5;
padding-inline: .2em;
display: block;
}
Die Funktion
css Anchor () nimmt eine Seite des Ankerelements ein und analysiert sie in seine positionierte. Es kann nur für Inline -Eigenschaften (wie oben, unten, unten, links, rechts usw.) verwendet werden und wird normalerweise verwendet, um absolut positionierte Elemente relativ zum Ankerpunkt zu platzieren.Schauen wir uns auch die MDN -Seite an:
Anchor () Die CSS -Funktion kann im eingebetteten Attributwert des Ankerpositionierungselements verwendet werden, wodurch der Längenwert relativ zu seiner zugehörigen Position des Ankerelements zurückgegeben wird.
Normalerweise verwenden wir links: 0, um das absolute Element am linken Rand seines enthaltenden Blocks zu platzieren (d. H. Der nächste Vorfahr mit Position: Relativ). Links: Anker (links) erledigt dasselbe, berücksichtigt jedoch das zugehörige Ankerelement, anstatt Blöcke zu enthalten.
Das ist es - wir sind fertig! Bewegen Sie die Menüelemente in der Demo unten, um zu sehen, wie Pseudoelemente zwischen ihnen gleiten.
Jedes Mal, wenn Sie Ihre Maus über einen Menüpunkt schweben, wird sie zu einem neuen Anker für die Pseudoelement (UL: Vor). Dies bedeutet auch, dass sich der Wert des Ankerwerts (...) ändert, was zu einem Gleiteffekt führt! Vergessen wir nicht, den Übergang zu verwenden, sonst werden wir eine plötzliche Änderung haben.
Wir können auch Code wie folgt schreiben:
<nav><ul>
<li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Home</a></li>
<li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">About</a></li>
<li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Projects</a></li>
<li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Blog</a></li>
<li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Contact</a></li>
</ul></nav>
Mit anderen Worten, anstatt physikalische Eigenschaften wie links, rechts und unten zu verwenden, können wir uns auf die einsiegelige Abkürzung verlassen, und anstatt Positionsanelchor zu definieren, können wir den Namen des Ankers in die Funktion Anchor () einbeziehen. Wir haben hier dreimal denselben Namen wiederholt, was möglicherweise nicht die beste Option ist. In einigen Fällen möchten Sie jedoch, dass Ihr Element mehrere Anker berücksichtigt. In diesem Fall wird diese Syntax sinnvoll sein.
zwei Effekte kombinieren
Jetzt kombinieren wir die beiden Effekte void , die Halluzination ist perfekt!
Bitte beachten Sie den Übergangswert, bei dem die Verzögerung wichtig ist:
ul {
padding: 0;
margin: 0;
list-style: none;
display: flex;
gap: .5rem;
font-size: 2.2rem;
}
ul li a {
color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b000;
text-decoration: none;
font-weight: 900;
line-height: 1.5;
padding-inline: .2em;
display: block;
}
Wir haben eine Reihe von drei Animationen-reduzieren Sie die Höhe des Gradienten, schieben Sie die Pseudoelemente und erhöhen Sie die Höhe des Gradienten-, sodass wir eine Verzögerung zwischen ihnen festlegen müssen, um alles zusammenzusetzen. Aus diesem Grund haben wir für den Swipe von Pseudoelementen eine Verzögerung, die einer Animationsdauer entspricht (Übergang: .2.2s), während für den Wachstumsteil die Verzögerung doppelt so hoch wie die Dauer (Übergang: .2s.4s).
Bounce -Effekt? Warum nicht? !
Versuchen wir eine andere seltsame Animation, bei der das hervorgehobene Rechteck in einen kleinen Kreis verformt, zum nächsten Element springt und dann wieder in das Rechteck zurückblickt!
Ich werde dieses Beispiel nicht zu sehr erklären, da dies Ihre Hausaufgaben für die Analyse des Codes sind! Ich werde einige Tipps geben, damit Sie auspacken können, was los ist.
Wie beim vorherigen Effekt haben wir zwei Animationen kombiniert. Zum ersten Mal werde ich die Pseudoelemente jedes Menüelements verwenden. Ich werde die Größe und den Grenzradius ändern, um die Verformung zu simulieren. Für die zweite Animation erstelle ich einen kleinen Kreis mit der UL Pseudo-Element, die ich zwischen Menüelementen bewege.
Dies ist eine weitere Version der Demo, verschiedene Farben und langsamere Übergänge, um jede Animation besser zu visualisieren:
Der knifflige Teil ist der Sprungeffekt, ich habe einen seltsamen Kubik-Bezier () verwendet, aber ich habe einen detaillierten Artikel, in dem diese Technik in meinem CSS-Tricks-Artikel "Advanced CSS-Animation mit Cubic-Bezier ()" erklärt wird.
Schlussfolgerung
Ich hoffe, Sie haben dieses kleine Experiment mit der Ankerpositionierungsfunktion genossen. Wir haben uns nur drei Eigenschaften/Werte angesehen, aber das reicht aus, um Sie für die Verwendung dieser neuen Funktion vorzubereiten. Die Attribute für Ankername und Position-Anchor sind obligatorische Teile, die ein Element (normalerweise als "Ziel" -Element in diesem Zusammenhang mit einem anderen Element verknüpfen (wir nennen das "Anker" -Element in diesem Zusammenhang). Von dort aus können Sie die Funktion Anchor () verwenden, um die Position zu steuern.
verwandt: CSS -Ankerpunktpunkthandbuch
Das obige ist der detaillierte Inhalt vonFancy -Menünavigation mit Ankerpositionierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!