HTML+CSS zum Erzielen von Spezialeffekten durch Textfaltung – Beispiel
|
In diesem Artikel werden hauptsächlich Beispiele für die Realisierung von Textfaltungsspezialeffekten mit HTML+CSS vorgestellt und wie folgt mit Ihnen geteilt: Wirkung:
erreichen: 1. Tags definieren: <h1>Polarlicht</h1> 2. Legen Sie den grundlegenden Textstil fest:
h1{
Texttransformation: Großbuchstaben;
Buchstabenabstand: 3px;
Schriftgröße: 15vw;
transformieren: drehen (-10 Grad) schief (30 Grad);
Position: relativ;
Farbe: rgba (0, 101, 253, 0,6);
-webkit-text-stroke: 2px rgba(0, 101, 253, 0,6);
Übergang: alles 1en;
}
text-transform: uppercase; Die Buchstaben werden zu Großbuchstaben. 3. Wenn Sie mit der Maus über den Text fahren, wird der Text eingefügt:
h1:hover{
/* Stapeln Sie zuerst die weiße Ebene, dann die schwarze Ebene. Die weiße Ebene deckt die schwarze Ebene ab, wodurch der weiße Bereich heller und der schwarze Bereich dunkler wird*/
Textschatten: 3px 3px 6px #fff,
3px 3px 6px #fff,
0 0 0px #000;
}
Die Hauptsache besteht darin, Schatten zu verwenden, indem zuerst weiße Schatten gestapelt werden und dann schwarze Schatten hinter den weißen Schatten gestapelt werden. Auf diese Weise sind die weißen Bereiche hell und die schwarzen Bereiche dunkel, wodurch ein versunkener Effekt entsteht. 4. Verwenden Sie doppelte Pseudoklassen, um den oberen Teil des Textes zu implementieren (Hinweis: Doppelte Pseudoklassen erben einige CSS-Eigenschaften des übergeordneten Elements):
h1::vor{
Inhalt: „Aurora“;
Farbe: RGB (255, 255, 255);
Position: absolut;
oben: 0;
links: 0;
Clip-Pfad: Einschub (0 0 50 % 0);
Übergang: alles 1en;
transformieren: drehenX(0 Grad) schräg(0 Grad);
}
Position: absolut; 5. Wenn Sie mit der Maus über den oberen Teil des Textes fahren, wird der Text ausgeblendet:
h1:hover::vor{
transformieren: rotierenX(-30 Grad) schräg(-30 Grad);
Farbe: rgb(243, 243, 243);
Textschatten: 0 0 1px schwarz;
}
Transformieren: X-Drehung (-30 Grad), Schrägstellung (-30 Grad), Drehung um -30 Grad, Neigung um -30 Grad.
h1::nach{
Inhalt: „Aurora“;
Farbe: RGB (255, 255, 255);
Position: absolut;
oben: 0;
links: 0;
Clip-Pfad: Einschub (50 % 0 0 0);
Übergang: alles 1en;
transformieren: drehenX(0 Grad) schräg(0 Grad);
}
h1:hover::nach{
transformieren: drehenX(40 Grad) schrägX(20 Grad);
Farbe: rgb(212, 212, 212);
Textschatten: 0 0 1px schwarz;
}
Vollständiger Code:
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
<title>Dokument</title>
<Stil>
*{
Rand: 0;
Polsterung: 0;
Box-Größe: Rahmenbox;
}
Körper{
Höhe: 100vh;
Breite: 100vw;
Anzeige: Flex;
Inhalt ausrichten: zentriert;
Elemente ausrichten: zentrieren;
}
h1{
Texttransformation: Großbuchstaben;
Buchstabenabstand: 3px;
Schriftgröße: 15vw;
transformieren: drehen (-10 Grad) schief (30 Grad);
Position: relativ;
Farbe: rgba (0, 101, 253, 0,6);
-webkit-text-stroke: 2px rgba(0, 101, 253, 0,6);
Übergang: alles 1en;
}
h1:hover{
/* Stapeln Sie zuerst die weiße Ebene, dann die schwarze Ebene. Die weiße Ebene deckt die schwarze Ebene ab, wodurch der weiße Bereich heller und der schwarze Bereich dunkler wird*/
Textschatten: 3px 3px 6px #fff,
3px 3px 6px #fff,
0 0 0px #000;
}
h1::vor{
Inhalt: „Aurora“;
Farbe: RGB (255, 255, 255);
Position: absolut;
oben: 0;
links: 0;
Clip-Pfad: Einschub (0 0 50 % 0);
Übergang: alles 1en;
transformieren: drehenX(0 Grad) schräg(0 Grad);
}
h1:hover::vor{
transformieren: rotierenX(-30 Grad) schräg(-30 Grad);
Farbe: rgb(243, 243, 243);
Textschatten: 0 0 1px schwarz;
}
h1::nach{
Inhalt: „Aurora“;
Farbe: RGB (255, 255, 255);
Position: absolut;
oben: 0;
links: 0;
Clip-Pfad: Einschub (50 % 0 0 0);
Übergang: alles 1en;
transformieren: drehenX(0 Grad) schräg(0 Grad);
}
h1:hover::nach{
transformieren: drehenX(40 Grad) schrägX(20 Grad);
Farbe: rgb(212, 212, 212);
Textschatten: 0 0 1px schwarz;
}
</Stil>
</Kopf>
<Text>
<h1>Polarlicht</h1>
</body>
</html>Dies ist das Ende dieses Artikels über das Beispiel der Verwendung von HTML+CSS zum Erzielen von Spezialeffekten beim Textfalten. Weitere relevante Inhalte zum Thema HTML+CSS-Textfalten finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird! |
<<: HTML+CSS zum Erstellen eines geschichteten Pyramidenbeispiels
>>: CSS Polarkoordinaten Beispielcode
Artikel empfehlen
Zusammenfassung von 28 gängigen JavaScript-String-Methoden und Verwendungstipps
Inhaltsverzeichnis Vorwort 1. Ermitteln Sie die L...
Implementierung eines Random Roll Callers basierend auf JavaScript
In diesem Artikel wird der spezifische JavaScript...
Implementierung des CSS-Quellcodes für herzförmige Ladeanimationen
Lassen Sie mich Ihnen ohne weitere Umschweife den...
So lösen Sie das Zeichensatzproblem bei der Anmeldung bei Linux
Zeichensatzfehler treten immer auf Gebietsschema:...
Ideen und Methoden zur inkrementellen Sicherung einer MySQL-Datenbank
Um eine inkrementelle Sicherung der MySQL-Datenba...
Vollständiges Beispiel der Kapselung der globalen Toast-Komponente durch Vue
Inhaltsverzeichnis Vorwort 1. Mit vue-cli 1. Defi...
Acht Implementierungslösungen für domänenübergreifendes JS-Frontend
Inhaltsverzeichnis 1. JSONP domänenübergreifend 2...
Detaillierte Erläuterung des Problemfalls beim Löschen des Vue KeepAlive-Cache
Keepalive wird häufig zum Caching in Vue-Projekte...
So beheben Sie den 2002-Fehler bei der Installation einer MySQL-Datenbank in der Alibaba Cloud
Beim Installieren der Datenbank ist folgender Feh...
Detaillierte Erklärung dieses Zeigeproblems in der JavaScript-Funktion
dieses Schlüsselwort Welches Objekt ruft die Funk...
Vue hält den Benutzer angemeldet (verschiedene Token-Speichermethoden)
Inhaltsverzeichnis So setzen Sie Cookies Nachteil...
Lösung für EF (Entity Framework)-Einfüge- oder Aktualisierungsfehler
Fehlermeldung: Die Store-Update-, Insert- oder De...
So konfigurieren Sie MySQL auf einem Ubuntu 16.04-Server und aktivieren die Remote-Verbindung
Hintergrund Ich lerne vor Kurzem nodejs und mir f...
Verwendung der hasOwnProperty-Methode des js-Attributobjekts
Die Methode hasOwnProperty() des Objekts gibt ein...
js-Code zur Realisierung eines Chatrooms für mehrere Personen
In diesem Artikelbeispiel wird der spezifische Co...