Das Hinzufügen einiger CSS -Link -Schwebeffekte zu normalen Webseiten kann die visuelle Anziehungskraft von Webseiten verbessern. Wenn Sie es jemals schwer hatten, coole Schwebeffekte zu erstellen, erhalten Sie in diesem Artikel sechs CSS -Effekte, die Sie direkt für Ihr nächstes Projekt verwenden können.
Fangen wir an!
Ich weiß, dass wir sprechen :hover , aber manchmal (vielleicht nicht immer) ist es eine gute Idee, auch zu beinhalten :focus , denn nicht alle Interaktionen stammen direkt aus der Maus, sondern vielleicht ein Klick oder eine Taste.
Dieser Effekt wendet einen Kastenschatten für Inline -Links an, während die Farbe des Link -Textes geändert wird. Wir fügen zuerst eine umgebende Polsterung für den Link hinzu und fügen dann eine negative Marge mit demselben Wert hinzu, um zu verhindern, dass die Polsterung den Textstrom durchbricht.
Wir werden box-shadow anstelle background verwenden, da wir Übergänge vornehmen können.
A {
Box-Shadow: Einschub 0 0 0 https://www.php.cn/link/93ac0c50dd620dc7b88e5Fe05c70e15b54b3d6;
Farbe: https://www.php.cn/link/93AC0C50DD620DC7B88E5FE05C70E15B54B3D6;
Rand: 0 -.25rem;
Polsterung: 0 .25rem;
Übergang: Farbe .3s Easy-In-Out, Box-Shadow.
}
A: Hover {
Box-Shadow: Einschub 100px 0 0 0 0 https://www.php.cn/link/93ac0c50dd620dc7b88e5Fe05C70E15B54B3D6;
Farbe: weiß;
}Dies ist ein interessanter Effekt, bei dem wir den verknüpften Text beim Schwebewesen mit einem anderen Text tauschen können. Über dem Text schweben, der Link -Text wird herausrutscht und neuer Text wird eingeleitet.
Demos sind leichter zu verstehen als Beschreibung.
Dieser Link -Hover -Effekt enthält viele Tricks. Die Magie ist jedoch, dass Datenattribute verwendet werden, um die Folie im Text zu definieren und sie mit content des Linked ::after Pseudo-Element aufzurufen.
Erstens HTML -Tags:
<p> Schweben <a data-replace="get a link" href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Sie einen Link</a></p>
Dies sind viele Inline -Tags, aber was Sie sehen, ist ein Absatz -Tag, das Links und Spans enthält.
Fügen wir dem Link einige grundlegende Stile hinzu. Wir müssen es mit einer relativen Positionierung zur Verfügung stellen, um die Pseudo-Elemente (absolut positioniert zu halten) zu halten, sicherzustellen, dass es als Inline-Block angezeigt wird, um die Bequemlichkeit von Boxelementstilen zu erhalten, und alle Überläufe auszublenden, die das Pseudoelement verursachen kann.
A {
Überlauf: versteckt;
Position: Relativ;
Anzeige: Inline-Block;
} ::before und ::after Pseudoelementen sollte eine absolute Positionierung haben, damit sie mit dem eigentlichen Link gestapelt sind. Wir werden sicherstellen, dass sie auf die volle Breite des Links mit Null linker Positionsversatz eingestellt sind und für einige Gleitvorgänge bereit sind.
A :: vor,
a :: nach {
Inhalt: '';
Position: absolut;
Breite: 100%;
links: 0;
} ::after Pseudo-Element Inhalte aus dem Link-Datenattribut im HTML-Tag erhalten hat:
a :: nach {
Inhalt: Attr (Datenerplake);
} Jetzt können wir transform: translate3d() , um ::after pseudo-element 200% nach rechts zu bewegen. Wir bewegen es zurück in seine ursprüngliche Position auf :hover . Übrigens können wir einen Nullversatz in die obere Richtung einstellen. Dies wird sehr wichtig sein, wenn wir ::before Pseudo-Element später wie Text unterstrichen.
a :: nach {
Inhalt: Attr (Datenerplake);
Top: 0;
Transform-Origin: 100% 50%;
Transformation: Translate3d (200%, 0, 0);
}
A: Hover :: Nach, danach,
A: Focus :: After {
Transformation: Translate3d (0, 0, 0);
} Wir werden auch transform: scale() ::before pseudoelement konvertieren, um sie standardmäßig zu verbergen und dann wieder zu skalieren :hover . Wir werden es kleiner machen, zum Beispiel 2PX, und es auf den Boden stecken, so dass es wie ein unterstrichener Text aussieht, der mit ::after ausgetauscht wird.
a :: vor {
Hintergrund-Color: https://www.php.cn/link/93AC0C50DD620DC7B88E5FE05C70E15B54B3D6;
Höhe: 2px;
unten: 0;
Transform-Origin: 100% 50%;
Transformation: scalex (0);
}
A: Hover :: Vor, vor,
A: Focus :: vor {
Transform-Origin: 0% 50%;
Transformation: Scalex (1);
}Der Rest sind Vorlieben! Wir fügen einen Übergang zum Conversion -Effekt, einige Farben usw. hinzu, um den vollen Effekt zu erzielen. Diese Werte liegen ganz bei Ihnen.
Sehen Sie sich den vollständigen CSS -Code an
`` `CSS A {Überlauf: Hidden;
A :: A. ; Attr (Data-Replace); 5B54B3D6;
A: Hover :: vor {Transform-Origin: 0% 50%;
Eine Spannweite {Anzeige: Inline-Block;
A: Hover Span {Transform: Translate3D (-200%, 0, 0);
https://www.php.cn/link/93AC0C50DD620DC7B88E5FE05C70E15BHTTPS://www.php.cn/link/93AC0c50dd620dc7b888Fe05c70e15bhtps D620DC7B88E5FE05C70E15B Wachstum Hintergrundverbindungsschwebeeffekt Dies ist ein sehr beliebter Effekt, den ich an vielen Orten gesehen habe. Die Idee ist, die Pseudo-Elemente des Links als dicker Unterstrich zu verwenden, der leicht hinter dem tatsächlichen Text des Links liegt. Im schwebenden Schwebeding erweitert sich das Pseudoelement um den gesamten Inhalt.
OK, einige grundlegende Stile für Links. Wir brauchen keine Textdekoration, denn ":: vor" wird als Textdekor fungieren, gefolgt von einer relativen Positionierung, um ":: vor" bei der Abgabe einer absoluten Positionierung an Ort und Stelle zu halten.
`` `CSS
A {
Textdekoration: Keine;
Position: Relativ;
} Lassen Sie uns jetzt ::before , damit seine Höhe etwa 8px beträgt, so dass es wie ein dicker Unterstrich aussieht. Wir werden ihm auch eine absolute Positionierung geben, damit wir die volle Breite des tatsächlichen Links steuern können, während wir sie ausgleichen, damit sie links und nur ein wenig von unten von unten ausgeschaltet ist, sodass es so aussieht, als würde es den Link subtil hervorheben. Sie können es genauso gut auf z-index: -1 , was sicherstellt, dass es sich hinter dem Link befindet.
a :: vor {
Inhalt: '';
Hintergrundfarbe: HSLA (196, 61%, 58%, .75);
Position: absolut;
links: 0;
unten: 3px;
Breite: 100%;
Höhe: 8px;
Z -Index: -1;
} sehr gut. Lassen Sie es uns aussehen wie ::before Sie wächst, wenn Sie den Link schweben. Wir müssen nur die Höhe von 3px auf 100%ändern. Beachten Sie, dass ich auch den unteren Offset auf Null wiederhergestellt habe, damit der Hintergrund beim Wachstum mehr Platz abdeckt.
A: Hover :: vor {
unten: 0;
Höhe: 100%;
}Fügen Sie nun einen leichten Übergang zu diesen Änderungen hinzu:
a :: vor {
Inhalt: '';
Hintergrundfarbe: HSLA (196, 61%, 58%, .75);
Position: absolut;
links: 0;
unten: 3px;
Breite: 100%;
Höhe: 8px;
Z -Index: -1;
Übergang: Alle .3s Leichterung;
} Sehen Sie sich den vollständigen CSS -Code an
`` CSS A {Textdekoration: keine;
A :: vorhanden: '' Hintergrund
A: Hover :: vor {unten: 0;
https://www.php.cn/link/93AC0C50DD620DC7B88E5FE05C70E15BHTTPS://www.php.cn/link/93AC0c50dd620dc7b888Fe05c70e15bhtps D620DC7B88E5FE05C70E15B COLOR SWAP LINK HOVER -HOVER -Effekt von rechts nach links Ich persönlich gerne diesen Effekt bei Links in der Navigation. Der Link beginnt mit einer Farbe ohne Unterstrich. Dann rutscht beim Schwebe eine neue Farbe von rechts ein und der Unterstrich gleitet von links.
Sehr ordentlich, oder? Es gibt viele Aktionen, sodass Sie möglicherweise die Auswirkungen auf die Zugänglichkeit in Betracht ziehen und alles in die bevorzugte Abfrage mit reduziertem Motion einbeziehen möchten, die durch nuanciertere Inhalte für diejenigen ersetzt werden können, die für die Bewegung empfindlich sind.
So funktioniert es. Wir bieten einen linearen Hintergrundgradienten für die Verbindung mit einem harten Stopp zwischen den beiden Farben in der Hälfte.
`` `CSS
A {
Hintergrundbild: Linear-Gradient (
rechts,
https://www.php.cn/link/93AC0C50DD620DC7B88E5FE05C70E15B54B3D6,
https://www.php.cn/link/93AC0C50DD620DC7B88E5FE05C70E15B54B3D6 50%,
https://www.php.cn/link/93AC0C50DD620DC7B88E5FE05C70E15B000 50%
);
}Wir setzen den Hintergrund auf die doppelte Breite des Links oder 200% und positionieren ihn vollständig nach links. Auf diese Weise scheint es, dass nur eine der beiden Farben des Gradienten angezeigt wird.
A {
Hintergrundbild: Linear-Gradient (
rechts,
https://www.php.cn/link/93AC0C50DD620DC7B88E5FE05C70E15B54B3D6,
https://www.php.cn/link/93AC0C50DD620DC7B88E5FE05C70E15B54B3D6 50%,
https://www.php.cn/link/93AC0C50DD620DC7B88E5FE05C70E15B000 50%
);
Hintergrundgröße: 200% 100%;
Hintergrundposition: -100%;
} Magische Dinge passieren, wenn wir mehrere nicht standardmäßige -webkit- Präfix-Eigenschaften verwenden. Man entfernt die Farbe aus dem Text, um sie transparent zu machen. Ein anderer klammern den Hintergrundgradienten zum Text, so dass der Text tatsächlich die Farbe des Hintergrunds zu sein scheint.
A {
Hintergrundbild: Linear-Gradient (
rechts,
https://www.php.cn/link/93AC0C50DD620DC7B88E5FE05C70E15B54B3D6,
https://www.php.cn/link/93AC0C50DD620DC7B88E5FE05C70E15B54B3D6 50%,
https://www.php.cn/link/93AC0C50DD620DC7B88E5FE05C70E15B000 50%
);
Hintergrundgröße: 200% 100%;
Hintergrundposition: -100%;
-Webkit-Background-Clip: Text;
-Webkit-Text-Fill-Farben: transparent;
} Immer noch folgen? Lassen Sie uns nun einen Pseudo-Abercore des Links erstellen, indem wir ::before verwenden. Wir geben ihm die gleiche Farbe wie der verborgene Teil des Link-Hintergrundgradienten und positionieren sie unter dem tatsächlichen Link, so dass es wie eine korrekte text-decoration: underline .
A: vor {
Inhalt: '';
Hintergrund: https://www.php.cn/link/93AC0C50DD620DC7B88E5FE05C70E15B54B3D6;
Anzeige: Block;
Position: absolut;
unten: -3px;
links: 0;
Breite: 0;
Höhe: 3px;
} Beim Schweber rutschen wir ::before in Ort und Stelle und gehen von links ein:
A: Hover {
Hintergrundposition: 0;
} Das ist etwas schwierig. Bei schwebem Umzug haben wir das verlinkte ::before Pseudo-Element auf 100% der Linkbreite festgelegt. Wenn wir dies direkt auf den Schweber des Links anwenden, werden wir den Link selbst in voller Breite machen, wodurch er sich um den Bildschirm verschiebt. Hoppla!
A: Hover :: vor {
Breite: 100%;
}Fügen Sie einen kleinen Übergang hinzu, damit die Dinge reibungslos läuft:
A {
Hintergrundbild: Linear-Gradient (
rechts,
https://www.php.cn/link/93AC0C50DD620DC7B88E5FE05C70E15B54B3D6,
https://www.php.cn/link/93AC0C50DD620DC7B88E5FE05C70E15B54B3D6 50%,
https://www.php.cn/link/93AC0C50DD620DC7B88E5FE05C70E15B000 50%
);
Hintergrundgröße: 200% 100%;
Hintergrundposition: -100%;
-Webkit-Background-Clip: Text;
-Webkit-Text-Fill-Farben: transparent;
Übergang: Alle 0,3S-Leichtigkeiten;
} Sehen Sie sich den vollständigen CSS -Code an
`` `CSS a {Hintergrund-Image: linear-Gradient (zu Recht,,
<code>https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b54b3d6 50%, https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b000 50%</code>
) Hintergrund: 200%;
A: Inhalt: '';
A: Hover {Hintergrundposition: 0;
A: Hover :: vor {Breite: 100%;
https://www.php.cn/link/93AC0C50DD620DC7B88E5FE05C70E15BHTTPS://www.php.cn/link/93AC0c50dd620dc7b888Fe05c70e15bhtps D620DC7B88E5FE05C70E15B Rainbow Underline-Link-Hover-Effekt Wir können nicht "Text-Decoration-Color: Rainbow" verwenden, aber wir können ihn fälschen, indem wir lineare Gradienten und Hintergrundmagie mischen.
Zunächst löschen wir die "Textdekoration" des Links:
`` `CSS
A {
Textdekoration: Keine;
} Jetzt ist es ein Gradient. Wir verknüpfen zwei lineare Gradienten auf derselben background . Ein Gradient ist die anfängliche Farbe vor dem Schwebe. Der zweite ist der Regenbogen bei Hover.
A {
Hintergrund:
linearer Gradient (
rechts,
RGBA (100, 200, 200, 1),
RGBA (100, 200, 200, 1)
),
linearer Gradient (
rechts,
RGBA (255, 0, 0, 1),
RGBA (255, 0, 180, 1),
RGBA (0, 100, 200, 1)
);
} Lassen Sie uns die Hintergrundgröße nur 3px hoch machen, damit sie unterstrichen ist. Wir können die Größe der beiden Gradienten gleichzeitig auf background-size einstellen, damit der anfängliche Gradient in voller Breite und 3px-Höhe ist, während der Regenbogen keine Breite hat.
A {
Hintergrund:
linearer Gradient (
rechts,
RGBA (100, 200, 200, 1),
RGBA (100, 200, 200, 1)
),
linearer Gradient (
rechts,
RGBA (255, 0, 0, 1),
RGBA (255, 0, 180, 1),
RGBA (0, 100, 200, 1)
);
Hintergrundgröße: 100% 3px, 0 3px;
} Jetzt können wir den Hintergrundgradienten gleichzeitig auf background-position positionieren, damit der erste Gradient vollständig sichtbar ist und der Regenbogen aus der Sicht gedrängt wird. Oh, stellen wir sicher, dass sich der Hintergrund bei Verwendung nicht wiederholt.
A {
Hintergrund:
linearer Gradient (
rechts,
RGBA (100, 200, 200, 1),
RGBA (100, 200, 200, 1)
),
linearer Gradient (
rechts,
RGBA (255, 0, 0, 1),
RGBA (255, 0, 180, 1),
RGBA (0, 100, 200, 1)
);
Hintergrundgröße: 100% 3px, 0 3px;
Hintergrundposition: 100%100%, 0 100%;
Hintergrundrepeat: No-Repeat;
} Aktualisieren wir background-size bei Schwebungen, damit der Gradienten-Swap-Wert:
A: Hover {
Hintergrundgröße: 0 3px, 100% 3px;
}Machen Sie schließlich einen kleinen Übergang, wenn der Schwebewechsel auftritt:
A {
Hintergrund:
linearer Gradient (
rechts,
RGBA (100, 200, 200, 1),
RGBA (100, 200, 200, 1)
),
linearer Gradient (
rechts,
RGBA (255, 0, 0, 1),
RGBA (255, 0, 180, 1),
RGBA (0, 100, 200, 1)
);
Hintergrundgröße: 100% 3px, 0 3px;
Hintergrundposition: 100%100%, 0 100%;
Hintergrundrepeat: No-Repeat;
Übergang: Hintergrundgröße 400 ms;
}Sehen!
Geoff Graham stellte diesen Effekt tatsächlich ein, als er kürzlich den coolen Schwebeffekt von Adam Argyle analysierte. In seiner Demo tritt die Hintergrundfarbe hinter dem Link von links ein und verläuft von rechts, während sich die Maus herauszieht.
Meine Version vereinfacht den Hintergrund, um eher zu unterstrichen.
A {
Position: Relativ;
}
a :: vor {
Inhalt: '';
Position: absolut;
Breite: 100%;
Höhe: 4px;
Border-Radius: 4px;
Hintergrund-Color: https://www.php.cn/link/93AC0C50DD620DC7B88E5FE05C70E15B18272F;
unten: 0;
links: 0;
Transform-Ursprung: Recht;
Transformation: scalex (0);
Übergang: Transformation.
}
A: Hover :: vor {
Transform-Origin: Links;
Transformation: Scalex (1);
}Dies ist nicht der einzige Weg, dies zu erreichen! Hier ist eine andere Möglichkeit, wie Justin Wong den Hintergrund verwendet:
Geoff bietet auch eine Reihe von CSS -Link -Hover -Effekten an, von ordentlich bis völlig lächerlich. Einen Blick wert! Für nützliche Inhalte zu Link- und Button -Stilen finden Sie in Digitalocean von Philip Zastrows Tutorial.
Es gibt viele Optionen, um mithilfe von CSS Ihren eigenen Schweberffekt für Inline -Links zu erstellen. Sie können sogar mit diesen Effekten herumspielen und neue Effekte erzeugen. Ich hoffe, Sie haben diesen Artikel genossen. Versuchen Sie es weiter!
Das obige ist der detaillierte Inhalt von6 Kreative Ideen für CSS Link -Schwebeeffekte. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Die Direct3D-Funktion ist nicht verfügbar
Mein Computer kann es nicht durch Doppelklick öffnen.
Einführung in Softwareentwicklungstools
Verwendung des Schlüsselworts Type in Go
Einführung in die Hauptarbeitsinhalte des Backends
Tutorial zum Kauf und Verkauf von Bitcoin auf Huobi.com
So verwenden Sie die Countif-Funktion
Welche Währung ist PROM?
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
