Sie haben vielleicht Geisterkn?pfe gesehen? Sie sind durch transparente Hintergründe gekennzeichnet und der Hintergrund ist mit fester Farbe gefüllt, wenn die Maus schwebt. Das Smashing Magazine hat einen Artikel zu diesem Thema. Dieser Artikel erstellt eine Geisterknopf, aber dieser Teil ist relativ einfach. Interessanterweise und schwierig werden wir die Füllanimation des Ghost -Knopfes am Maus -Schwebedruck beginnen.

Hier ist ein grundlegender Ghost -Button -Beispiel:

In den meisten F?llen wechselt die Hintergrundfarbe in die feste Farbe. Einige Designs füllen die Tasten von links nach rechts, von oben nach unten usw., um den visuellen Effekt zu erh?hen. Füllen Sie beispielsweise von links nach rechts:

Hier ist ein kleines Problem der Benutzererfahrung. Wenn sich die Maus über den Rand des gefüllten Bereichs schwebt, wird sie das Gefühl haben, dass etwas nicht stimmt. Betrachten Sie dieses Beispiel, die Taste füllt links, w?hrend Sie von rechts schweben.

Es ist am besten, dass die Taste aus dem anf?nglichen Schwebepunkt aus füllt.

Wie geben wir die Wahrnehmung der Knopf Richtung ? Ihre anf?ngliche Intuition k?nnte sein, JavaScript zu verwenden, aber wir k?nnen dies mit CSS und einigen zus?tzlichen Tags tun.

Für diejenigen, die einen kurzen Blick auf die Ergebnisse werfen m?chten, finden Sie hier einige richtungsbewusste Geistertasten, die in reinem CSS implementiert sind!

Lassen Sie es uns Schritt für Schritt erstellen. Alle Code finden Sie in dieser Codepen -Sammlung.

Erstellen Sie eine Basis

Beginnen wir mit den Grundlagen des Erstellens der Ghost -Taste. Die Markierung ist einfach.

 <button>Boo!</button>

Unsere CSS -Implementierung verwendet CSS -benutzerdefinierte Eigenschaften. Dies erleichtert die Wartung und erleichtert die Anpassung durch Inline -Eigenschaften.

 Taste {
  --Gr??enweite: 5;
  -BoxShadowDepth: 8;
  -ButtonColor: #f00;
  -montieren: 3;
  -HorizontalPadding: 16;
  --verticalPadding: 8;

  Hintergrund: transparent;
  Rand: Calc (var (-Grenze) * 1px) Solid var (-buttonColor);
  Box-Shadow: Calc (var (-boxShadowDepth) * 1px) calc (var (-boxShadowDepth) * 1px) 0 #888;
  Farbe: var (-buttonColor);
  Cursor: Zeiger;
  Schriftgr??e: calc (var (-fontsize) * 1rem);
  Schriftgewicht: fett;
  Umriss: transparent;
  Polsterung: Calc (var (-VerticalPadding) * 1px) Calc (var (-HorizontalPadding) * 1px);
  übergang: Box-Shadow 0,15s Leichtigkeit;
}

Taste: Hover {
  Box-Shadow: Calc (var (-boxShadowDepth) / 2 * 1px) calc (var (-boxShadowDepth) / 2 * 1px) 0 #888;
}

Taste: aktiv {
  Box-Shadow: 0 0 0 #888;
}

Setzen Sie es zusammen und wir bekommen:

sehr gut! Wir haben einen Knopf und einen Schwebeffekt, aber es gibt noch keinen Fülleffekt. Als n?chstes fügen wir den Filleffekt hinzu.

Füllung hinzufügen

Dazu erstellen wir einige Elemente, um den Füllstand der Ghost -Taste anzuzeigen. Der Trick besteht darin, clip-path zu verwenden, um diese Elemente zu erregen und sie zu verbergen. Wir k?nnen sie im Schwebedruck anzeigen, indem wir clip-path konvertieren.

Sie müssen auf die übergeordnete Taste ausgerichtet sein . Unsere CSS -Variablen werden hier von gro?er Hilfe sein.

Zuerst k?nnten wir in Betracht ziehen, Pseudoelemente zu verwenden. Für jede Richtung reicht die Anzahl der Pseudoelemente jedoch nicht aus. Sie beeinflussen auch die Zug?nglichkeit… dazu sp?ter mehr.

Beginnen wir zun?chst eine grundlegende Polsterung von links nach rechts. Lassen Sie uns zun?chst einen hinzufügen<span></span> Element. Sollen<span></span> Das Element muss den gleichen Textinhalt wie die Schaltfl?che haben.

<button>
  <span>Boo!</span>
  Boo!
</button>

Jetzt müssen wir<span></span> Elemente sind mit Tasten ausgerichtet. Unsere CSS -Variablen erledigen den gr??ten Teil der Arbeit.

 Tastespanne {
  Hintergrund: var (-buttonColor);
  Rand: Calc (var (-Grenze) * 1px) Solid var (-buttonColor);
  unten: calc (var (-Grenzbreite) * -1px);
  Farbe: var (-BG, #fafafa);
  Links: Calc (var (-Grenzbreite) * -1px);
  Polsterung: Calc (var (-VerticalPadding) * 1px) Calc (var (-HorizontalPadding) * 1px);
  Position: absolut;
  Rechts: Calc (var (-Grenzbreite) * -1px);
  Oben: Calc (var (-Grenzbreite) * -1px);
}

Schlie?lich werden wir<span></span> Das Element ist au?erhalb der Ansicht zugeschnitten und fügt eine Regel hinzu, um sie durch Aktualisierung der Ernte in Schwebebe anzuzeigen. Durch die Definition eines übergangs wird der Kuchen erh?ht.

 Tastespanne {
  --Clip: Einschub (0 100% 0 0);
  -Webkit-Clip-Pfad: var (-Clip);
  Clip-Pfad: var (-Clip);
  übergang: Clip-Pfad 0,25s Leichtigkeit, -Webkit-Clip-Path 0,25s Leichtigkeit;
  / * ... verbleibende Div -Stile *//
}

Taste: Hover Span {
  --Clip: Einschub (0 0 0 0);
}

Richtungsbewusstsein hinzufügen

Wie k?nnen wir also Richtungsbewusstsein hinzufügen? Wir brauchen vier Elemente. Jedes Element ist dafür verantwortlich, den Schweber -Einstiegspunkt zu erkennen. Mit clip-path k?nnen wir den Knopfbereich in vier Teile unterteilen.

Fügen wir der Taste vier hinzu<span></span> Elemente und positionieren Sie sie, um die Tasten zu füllen.

<button>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  Boo!
</button>

Tastespanne {
  Hintergrund: var (-BG);
  unten: calc (var (-Grenzbreite) * -1px);
  -Webkit-Clip-Pfad: var (-Clip);
  Clip-Pfad: var (-Clip);
  Links: Calc (var (-Grenzbreite) * -1px);
  Deckkraft: 0,5;
  Position: absolut;
  Rechts: Calc (var (-Grenzbreite) * -1px);
  Oben: Calc (var (-Grenzbreite) * -1px);
  Z-Index: 1;
}

Wir k?nnen jedes Element lokalisieren und Pflanzen und Farben mit CSS -Variablen zuweisen.

 Tastespannung: Nth-of-Typ (1) {
  --BG: #00f;
  -Clip: Polygon (0 0, 100% 0, 50% 50%, 50% 50%);
}
Tastespannung: Nth-of-Typ (2) {
  --BG: #f00;
  -Clip: Polygon (100% 0, 100% 100%, 50% 50%);
}
Tastespannung: Nth-of-Typ (3) {
  -BG: #008000;
  -Clip: Polygon (0 100%, 100%100%, 50%50%);
}
Tastespannung: Nth-of-Typ (4) {
  -BG: #800080;
  -Clip: Polygon (0 0, 0 100%, 50%50%);
}

Sehr cool. Um dies zu testen, ?ndern wir die Opazit?t, w?hrend wir schweben.

 Knopfspanne: N-ten vom Typ (1): schweben,
Knopfspannung: N-ten vom Typ (2): schweben,
Knopfspannung: N-ten vom Typ (3): schweben,
Schaltfl?che Span: N-ten-vom-Typ (4): Hover {
  Deckkraft: 1;
}

Oh, hier gibt es eine Frage. Wenn wir hineingehen und über einen Abschnitt schweben und dann über einen anderen schweben, ?ndert sich die Füllrichtung. Das scheint nicht richtig zu sein. Um dieses Problem zu l?sen, k?nnen wir z-index und clip-path auf Schwebepl?tze einstellen, damit ein Teil des Raums gefüllt ist.

 Knopfspanne: N-ten vom Typ (1): schweben,
Knopfspannung: N-ten vom Typ (2): schweben,
Knopfspannung: N-ten vom Typ (3): schweben,
Schaltfl?che Span: N-ten-vom-Typ (4): Hover {
  -Clip: Polygon (0 0, 100% 0, 100% 100%, 0 100%);
  Deckkraft: 1;
  Z-Index: 2;
}

Kombinieren

Wir wissen, wie man Füllanimationen erstellt, und wir wissen, wie man Anweisungen erkennt. Wie kombinieren wir die beiden? Verwenden Sie eine Kombination auf dem gleichen Niveau!

Wenn wir ein Segment schweben, k?nnen wir ein bestimmtes Füllelement anzeigen.

Lassen Sie uns zun?chst das Tag aktualisieren.

<button>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <b>Boo!</b>
  <b>Boo!</b>
  <b>Boo!</b>
  <b>Boo!</b>
  Boo!
</button>

Jetzt k?nnen wir das CSS aktualisieren. In Bezug auf unsere Polsterung von links nach rechts k?nnen wir Stile wiederverwenden. Wir müssen nur einen bestimmten clip-path für jedes Element festlegen. Ich habe es in der gleichen Reihenfolge wie einige Attributwerte behandelt. Das erste untergeordnete Element ist das Oberteil, das zweite ist das Recht und so weiter.

 Taste B: N-ten vom Typ (1) {
  --Clip: Einschub (0 0 100% 0);
}
Taste B: N-ten vom Typ (2) {
  -Clip: Einschub (0 0 0 100%);
}
Taste B: N-vom-Typ (3) {
  --Clip: Einschub (100% 0 0 0);
}
Taste B: N-vom-Typ (4) {
  --Clip: Einschub (0 100% 0 0);
}

Der letzte Schritt besteht darin, clip-path des relevanten Elements beim überschweben des Paarungssegments zu aktualisieren.

 Tastespannung: Nth-of-Typ (1): Hover ~ B: N-ten vom Typ (1),
Knopfspanne: N-ten vom Typ (2): Hover ~ B: N-ten vom Typ (2),
Knopfspanne: N-ten vom Typ (3): Hover ~ B: N-ten vom Typ (3),
Knopfspanne: N-ten vom Typ (4): Hover ~ B: n-vom-Typ (4) {{
  --Clip: Einschub (0 0 0 0);
}

In Ordnung! Wir erhalten einen reinen CSS -Ghost -Knopf mit Richtungsbewusstsein.

Zug?nglichkeit

Im aktuellen Zustand ist die Taste unzug?nglich.

Diese zus?tzlichen Elemente helfen nicht viel, da der Bildschirmleser den Inhalt viermal wiederholt. Wir müssen diese Elemente vor dem Bildschirmleser verbergen.

<button>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <b aria-hidden="true">Boo!</b>
  <b aria-hidden="true">Boo!</b>
  <b aria-hidden="true">Boo!</b>
  <b aria-hidden="true">Boo!</b>
  Boo!
</button>

Kein doppelter Inhalt mehr.

Das ist alles!

Mit nur einigen zus?tzlichen Markierungen und einigen CSS -Tricks k?nnen wir Geisterkn?pfe mit Richtbewusstsein erstellen. Wenn Sie einen Pr?prozessor verwenden oder eine Komponente in Ihrer Anwendung kombinieren, müssen Sie nicht alle HTML ausschreiben.

Dies ist eine Demonstration der Verwendung von Inline -CSS -Variablen zur Steuerung der Schaltfl?che.

Diese überarbeitete Ausgabe beh?lt das Originalbild bei und verwendet pr?zise und abwechslungsreichere Phrasierung, w?hrend die Kernbedeutung des Originaltextes erhalten bleibt. Es befasst sich auch mit dem im Originalartikel genannten Zugangsproblem.

Das obige ist der detaillierte Inhalt vonGeisterkn?pfe mit Richtungsbewusstsein in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!