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

Zusammenfassung der speziellen Verarbeitungsanweisungen für MySQL-SQL-Anweisungen (unbedingt lesen)

CSS sorgt dafür, dass der untergeordnete Container das übergeordnete Element übersteigt (der untergeordnete Container schwebt im übergeordneten Container).

Vorwort Manchmal benötigen wir eine Floating-Effe...

Beispielcode für Text-Origami-Effekt mit CSS3

Zusammenfassung der speziellen Verarbeitungsanweisungen für MySQL-SQL-Anweisungen (unbedingt lesen)

Was ist SSH? Wie benutzt man? Was sind die Missverständnisse?

(MariaDB) Umfassende Erklärung der MySQL-Datentypen und Speichermechanismen

Eine kurze Diskussion über die Farbabstimmungsfähigkeiten von Webseiten (ein Muss für Front-End-Entwickler)

Erfahren Sie mehr über MySQL-Indizes

Beispiel für einen SQL-Seriennummernerfassungscode

Detaillierte Erklärung der MySQL EXPLAIN-Ausgabespalten

Nginx Reverse-Proxy-Konfiguration entfernt Präfix

Grundlegender JSON-Betriebsleitfaden in MySQL 5.7

So legen Sie schnell den Dateipfad-Alias in React fest

Artikel empfehlen

Befehlsliste des Baota Linux-Panels

Detaillierte Analyse des binlog_format-Modus und der Konfiguration in MySQL

JavaScript implementiert einfache Rechnerfunktion

CSS sorgt dafür, dass der untergeordnete Container das übergeordnete Element übersteigt (der untergeordnete Container schwebt im übergeordneten Container).

Analyse der Implementierung der MySQL-Anweisungssperre

Erstellen Sie eine schöne, umklappbare Anmelde- und Registrierungsoberfläche auf HTML+CSS-Basis

Verbesserung der Aktualisierungsfunktion für Zen-Codierungsressourcen

HTML+CSS zum Erstellen eines einfachen Fortschrittsbalkens

So installieren Sie Docker unter Windows 10 Home Edition

So installieren und ändern Sie das Anfangskennwort von mysql5.7.18

Detaillierte Erklärung der Javascript-Grundlagenschleife

Umfassendes Verständnis von Zeilenhöhe und vertikaler Ausrichtung

So verwenden Sie fdisk zum Partitionieren der Festplatte in Linux

4 Möglichkeiten zur Implementierung von Routing-Übergangseffekten in Vue

Verwenden Sie Docker, um ein Git-Image mithilfe des Klon-Repositorys zu erstellen