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

Verwenden Sie Node-Media-Server, um einen einfachen Streaming-Media-Server zu erstellen

Zeichnen Sie einige der Prozesse der Verwendung d...

Perfekte Lösung für das Problem, dass Windows Server 2012 oder 2016 .NET Framework 3.5 nicht ohne Festplatte installieren kann

Problembeschreibung Bei Verwendung von Windows Se...

CentOS7 stellt Version 19 von Docker bereit (einfach, Sie können es nachvollziehen)

1. Installieren Sie Abhängigkeitspakete [root@loc...

Detaillierte Erklärung des Ausführungskontexts und des Aufrufstapels in JavaScript

Inhaltsverzeichnis 1. Was ist der Ausführungskont...

JavaScript-Closures erklärt

Inhaltsverzeichnis 1. Was ist ein Abschluss? 1.2 ...

So installieren Sie Docker auf einem Linux-System und melden sich über SSH beim Docker-Container an

Hinweis: Ich verwende Centos, um Docker zu instal...

Der Unterschied zwischen HTML-Iframe und Frameset_PowerNode Java Academy

Einführung 1. <iframe>-Tag: Ein Iframe ist ...

Analyse des Implementierungsprinzips von Vue-Anweisungen

Inhaltsverzeichnis 1. Grundlegende Verwendung 2. ...

Neue interaktive Erfahrungen mit Online-Werbung bei der Website-Erstellung (grafisches Tutorial)

Mit der zunehmenden Reife des Internetzeitalters ...

Detaillierte Erläuterung der mysql5.6 Master-Slave-Einrichtung und asynchroner Probleme

Inhaltsverzeichnis 1. MySQL Master-Slave-Replikat...

Beispiel einer JSON-Ausgabe im HTML-Format (Testschnittstelle)

Um die JSON-Daten in einem schönen eingerückten F...

Beispiele für die Verwendung des Li-Tags in HTML

Ich möchte den Titel links und das Datum rechts a...

Schritte zur Installation von Pyenv unter Deepin

Vorwort In der Vergangenheit habe ich die Python-...

Detaillierte Erklärung zum Erstellen gespeicherter Prozeduren und Funktionen in MySQL

Inhaltsverzeichnis 1. Gespeicherte Prozedur 1.1. ...

Der URL-Wert des SRC- oder CSS-Hintergrundbildes ist der Base64-codierte Code

Möglicherweise ist Ihnen aufgefallen, dass auf die...