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.

http://ipnx.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bhtpps://ipnx.cn/link/93ac0dd620d620d620dc7b8885fe05c70e15C50D620DC7B8885Fe05c70E15C50D620DC7B8885FE05C70E15C50DD620DC7B885FE05C70E15C50D620DC7B8885FE05C70E15C50D620DC7B88881b8885Fe05c70e15c50 N/Link/93AC0C50DD620DC7B88E5FE05C70E15B INITIAL -Konfiguration

Beginnen wir mit der HTML -Struktur, die nur ein Navigationselement ist, das eine nicht ordnungsgem??e Linkliste enth?lt:

<nav><ul>
<li><a href="http://ipnx.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Home</a></li>
    <li><a href="http://ipnx.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">About</a></li>
    <li><a href="http://ipnx.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Projects</a></li>
    <li><a href="http://ipnx.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Blog</a></li>
    <li><a href="http://ipnx.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: http://ipnx.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="http://ipnx.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Home</a></li>
    <li><a href="http://ipnx.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">About</a></li>
    <li><a href="http://ipnx.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Projects</a></li>
    <li><a href="http://ipnx.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Blog</a></li>
    <li><a href="http://ipnx.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 Pseudoelement ist richtig platziert, aber nichts wird gesehen, weil wir keine Dimensionen definieren! Fügen wir den folgenden Code hinzu:

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: http://ipnx.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="http://ipnx.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Home</a></li>
    <li><a href="http://ipnx.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">About</a></li>
    <li><a href="http://ipnx.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Projects</a></li>
    <li><a href="http://ipnx.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Blog</a></li>
    <li><a href="http://ipnx.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: http://ipnx.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!