HTML+CSS zum Erzielen von Spezialeffekten durch Textfaltung – Beispiel

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:

Bildbeschreibung hier einfügen

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.
Buchstabenabstand: 3px; Buchstabenabstand.
Transformieren: Drehen (-10 Grad) Neigen (30 Grad); Erst um -10 Grad drehen, dann um 30 Grad neigen.
-webkit-text-stroke: 2px rgba(0, 101, 253, 0,6); Textrahmendetails
Übergang: alles 1s; Übergangseffekt

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;
oben: 0;
links: 0; Positionierung.
Clip-Pfad: Einschub (0 0 50 % 0); Nur die obere Hälfte des Textes zuschneiden und anzeigen.
transform: rotateX(0deg) skew(0deg); Vorerst nicht drehen oder kippen.

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.
Farbe: rgb(243, 243, 243); Die Farbe wird dunkler.
Textschatten: 0 0 1px schwarz; Schatten.
6. Gleicher Zweck, stellen Sie den unteren Teil ein:

 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

Lösen Sie das Problem der Verwendung von weniger in Vue

1. Installieren Sie weniger Abhängigkeiten: npm i...

Einige Probleme, die durch inkonsistente MySQL-Kodierung verursacht werden können

Gespeicherte Prozeduren und Codierung Wenn in ges...

Zusammenfassung häufig verwendeter CSS-Kapselungsmethoden

1. PC-Reset Initialisierung im PC-Stil /* normali...

Lösung für den Konflikt zwischen Nginx und Backend-Port

Frage: Bei der Entwicklung des Alice-Verwaltungss...

Erfahrung mit parallelen React-Funktionen (gleichzeitiger Front-End-Modus)

React ist eine Open-Source-JavaScript-Bibliothek,...

Detaillierte Erklärung des unbekannten Fehlers 10061 bei der Verwendung von Navicat zur Verbindung mit einer Remote-Linux-MySQL-Datenbank

Bei der Verwendung von Navicat zum Herstellen ein...

Lösen Sie das Problem mehrerer Listener, die beim Starten von Tomcat in Idea gemeldet werden

Fehler-Screenshot Ich kann nicht finden, wo die A...

Informationen zur Auswahl des Uhrzeit-, Datums- und Zeichenfolgentyps in MySQL

Inhaltsverzeichnis 1. Verwendung von DATETIME und...

Windows 10 ist zu schwierig zu verwenden. Wie passen Sie Ihr Ubuntu an?

Autor | Herausgeber Awen | Produziert von Tu Min ...

Detailliertes grafisches Tutorial zur Installation der entpackten Version von MySQL unter Windows 10

Die MySQL-Installation ist in eine Installationsv...

Einfaches Anwendungsbeispiel für rekursive MySQL 8.0-Abfragen

Vorwort Dieser Artikel verwendet die neuen Funkti...

Vue Learning - Grundlagen des VueRouter-Routings

Inhaltsverzeichnis 1. VueRouter 1. Beschreibung 2...

Geschickte Nutzung von WebKit-Box-Reflect zur Erzielung verschiedener dynamischer Effekte (Zusammenfassung)

In einem Artikel vor langer Zeit habe ich über di...

Detaillierte Erklärung zur Installation und Verwendung von Vue-Router

Inhaltsverzeichnis Installieren Grundlegende Konf...

So bedienen Sie JSON-Felder in MySQL

MySQL 5.7.8 führte das JSON-Feld ein. Dieser Feld...