Beispielcode für Text-Origami-Effekt mit CSS3

Beispielcode für Text-Origami-Effekt mit CSS3

Vorwort

In diesem Artikel erfahren Sie hauptsächlich ein Beispiel für die Verwendung von CSS3 zum Erzielen eines Text-Origami-Effekts. Es dient Ihrer Information und zum Lernen. Sehen wir uns die ausführliche Einführung an.

Effektbild:

Beispielcode:

Der Code lautet wie folgt, einfach kopieren und verwenden:

<!DOCTYPE html>
<html>
<Kopf>
    <Titel></Titel>
    <style type="text/css">
        html {
  Höhe: 100%;
}

Körper {
  Hintergrund: -webkit-linear-gradient(45 Grad, #e6e2df 80 %, #c2c1bd 100 %);
  Hintergrund: linearer Farbverlauf (45 Grad, #e6e2df 80 %, #c2c1bd 100 %);
  Höhe: 100%;
  -webkit-font-smoothing: Kantenglättung;
  -moz-osx-font-smoothing: Graustufen;
}

.wrapper {
  Breite: 100 %;
  Schriftfamilie: „Source Code Pro“, Monospace;
  Rand: 0 automatisch;
  Höhe: 100%;
}
.wrapper h1 {
  Texttransformation: Großbuchstaben;
  -webkit-transform: verschieben (-50 %, -50 %), schief (10 Grad), drehen (-10 Grad);
          transformieren: verschieben (-50 %, -50 %), schief (10 Grad), drehen (-10 Grad);
  Schriftgröße: 20vw;
  oben: 50 %;
  links: 50%;
  Rand: 0;
  Position: absolut;
  Textdarstellung: Lesbarkeit optimieren;
  Schriftstärke: 900;
  Farbe: rgba (255, 158, 177, 0,5);
  Textschatten: 1px 4px 6px #e6e2df, 0 0 0 #66303a, 1px 4px 6px #e6e2df;
}
.wrapper h1:vor {
  Inhalt: attr(Datenüberschrift);
  Position: absolut;
  links: 0;
  oben: -4,8 %;
  Überlauf: versteckt;
  Breite: 100 %;
  Höhe: 50%;
  Farbe: #fbf7f4;
  -webkit-transform: übersetzen (1,6vw, 0) skew (-13 Grad) Skalierung (1, 1,2);
          transformieren: übersetzen (1,6 vw, 0) schief (-13 Grad) skalieren (1, 1,2);
  Z-Index: 2;
  Textschatten: 2px -1px 6px rgba(0, 0, 0, 0,2);
}
.wrapper h1:nach {
  Inhalt: attr(Datenüberschrift);
  Position: absolut;
  links: 0;
  oben: 0;
  Überlauf: versteckt;
  Breite: 100 %;
  Höhe: 100%;
  Z-Index: 1;
  Farbe: #d3cfcc;
  -webkit-transform: übersetzen(0vw, 0) skew(13deg) scale(1, 0.8);
          transformieren: übersetzen(0vw, 0) schrägstellen(13 Grad) skalieren(1, 0,8);
  -webkit-clip-path: Polygon (0 50 %, 100 % 50 %, 100 % 100 %, 0 % 100 %);
          Clip-Pfad: Polygon (0 50 %, 100 % 50 %, 100 % 100 %, 0 % 100 %);
  Textschatten: 2px -1px 6px rgba(0, 0, 0, 0,3);
}

    </Stil>
</Kopf>
<Text>
    <div Klasse="Wrapper">
        <h1 Datenüberschrift="jQuery">jQuery</h1>
    </div>
</body>
</html>

Zusammenfassen

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, dass der Inhalt dieses Artikels einen gewissen Lernwert für Ihr Studium oder Ihre Arbeit hat. Wenn Sie Fragen haben, können Sie eine Nachricht hinterlassen. Vielen Dank für Ihre Unterstützung von 123WORDPRESS.COM.

<<:  Mehrere praktische Szenarien zur Implementierung der Ersetzungsfunktion in MySQL

>>:  Schreiben Sie einen formellen Blog mit XHTML CSS

Artikel empfehlen

Der Unterschied zwischen Hash-Modus und Verlaufsmodus im Vue-Router

vue-router hat zwei Modi Hash-Modus Verlaufsmodus...

Vue-Routing zum Implementieren der Login-Abfangung

Inhaltsverzeichnis 1. Übersicht 2. Routing Naviga...

Zusammenfassung der Tipps zur Verwendung von coalesce() in MySQL

Vorwort Kürzlich habe ich zufällig MySQLs Coalesc...

Eine kurze Erläuterung der ifnull()-Funktion ähnlich der nvl()-Funktion in MySQL

IFNULL(Ausdruck1,Ausdruck2) Wenn expr1 nicht NULL...

MySQL 8.0.21.0 Community Edition Installations-Tutorial (ausführliche Abbildungen)

1. MySQL herunterladen Melden Sie sich auf der of...

So aktivieren Sie die Swoole Loader-Erweiterung auf dem virtuellen Host des Linux-Systems

Besonderer Hinweis: Es wird nur die Swoole-Erweit...

Lassen Sie uns über die beiden Funktionen von try catch in Javascript sprechen

Das Programm wird sequentiell von oben nach unten...

MySQL 5.7.10 Installations- und Konfigurations-Tutorial unter Windows

MySQL bietet zwei verschiedene Versionen für unte...

Lösen Sie das Problem verstümmelter chinesischer Zeichen, wenn Sie Daten von Tomcat unter Linux in MySQL einfügen

1. Problem Das mit Eclipse unter Windows entwicke...

So implementieren Sie einen Kennwortstärke-Detektor in React

Inhaltsverzeichnis Vorwort verwenden Komponentens...

Detaillierte Erläuterung der Methode zur Optimierung der MySQL-Datenbanktabellenstruktur

Dieser Artikel veranschaulicht anhand eines Beisp...

Hinweise zur Verwendung von Textarea

Warum speziell Textbereich erwähnen? Denn der Text...

Linux-Datei-/Verzeichnisberechtigungen und Eigentümerverwaltung

1. Übersicht über Dateiberechtigungen und Eigentu...

React realisiert sekundäre Verknüpfung (linke und rechte Verknüpfung)

In diesem Artikel wird der spezifische Code von R...

Detaillierte Erklärung des Unterschieds zwischen einem href=# und einem href=javascript:void(0)

a href="#"> Nach dem Klicken auf den ...