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

Beispielcode zum Erzielen eines dreidimensionalen Bildplatzierungseffekts mit reinem CSS

1. Prozentuale Basis für Elementbreite/-höhe/-pol...

Detaillierte Erläuterung des Problems bei der Konfiguration des Servlet-URL-Musters in Tomcat

Beim Konfigurieren von web.xml für Tomcat ist Ser...

Implementierungsschritte zur Installation eines Redis-Containers in Docker

Inhaltsverzeichnis Redis auf Docker installieren ...

Detaillierte Erklärung und Beispiele zur Passwortverschlüsselung für Datenbankkonten

Detaillierte Erklärung und Beispiele zur Passwort...

MySQL-Abfrage gibt an, dass das Feld keine Zahl und kein Komma SQL ist

Grundlegende SQL-Anweisungen MySQL-Abfrageanweisu...

Aufbauprinzip des Nexus-Privatservers und Tutorial-Analyse

eins. Warum einen privaten Nexus-Server erstellen...

So machen Sie Formulareingaben und andere Textfelder in HTML schreibgeschützt und nicht bearbeitbar

Manchmal möchten wir, dass die Textfelder im Formu...

Vue implementiert dynamische Routingdetails

Inhaltsverzeichnis 1. Frontend-Steuerung 1. In de...

Express-Projektdateiverzeichnisbeschreibung und detaillierte Funktionsbeschreibung

app.js: Startdatei oder Einstiegsdatei package.js...

Detaillierte Erklärung der Befehle zur Berechtigungsverwaltung in Linux (chmod/chown/chgrp/unmask)

Inhaltsverzeichnis chmod Beispiel Besonderes Auge...

Lösen Sie schnell das Problem der chinesischen Eingabemethode unter Linux

Hintergrund: Ich arbeite derzeit an Funktionen fü...

Tutorial zur Tomcat-Konfiguration für Nginx/Httpd-Lastausgleich

Im vorherigen Blog haben wir über die Verwendung ...

CSS-Code zur Steuerung der Hintergrundfarbe der Webseite

Ich glaube, jeder macht sich oft Sorgen, ob er Bi...

Zusammenfassung der React-Grundlagen

Inhaltsverzeichnis Vorwort Start React-Lebenszykl...

Detailliertes Tutorial zur Installation des ElasticSearch:7.8.0-Clusters mit Docker

Der ElasticSearch-Cluster unterstützt動態請求的方式und靜態...