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

MySQL verwendet Variablen, um verschiedene Sortierungen zu implementieren

Beispielcode zur Implementierung eines dreispaltigen Layouts mit CSS, wobei die mittlere Spalte adaptiv ist und ihre Breite mit der Textgröße ändert

Die in Baidu-Interviews gestellten Fragen müssen ...

Beispielcode für Text-Origami-Effekt mit CSS3

MySQL verwendet Variablen, um verschiedene Sortierungen zu implementieren

Reagieren Sie auf die Verarbeitung von Fehlergrenzkomponenten

Über visuelles Design und Interaktionsdesign

So setzen Sie das Passwort zurück, wenn Sie es in MySQL8 vergessen haben (die alte MySQL-Methode funktioniert nicht)

Umfassendes Verständnis von HTML-Formularelementen

Grafisches Tutorial zur Installations- und Konfigurationsmethode von Mysql5.7.14 (Lösung für Passwortprobleme)

Erfahren Sie in einem Artikel mehr über den Anzeigemodus für CSS-Beschriftungen

Vue Element Front-End-Anwendungsentwicklung Konventionelle Element-Schnittstellenkomponenten

Implementierung der CSS-Bildlaufleisten-Stileinstellungen

5 einfache Möglichkeiten, Speicherplatz auf Ubuntu freizugeben

Artikel empfehlen

So kopieren Sie eine MySQL-Tabelle

Tutorial zur Installation und Konfiguration der entpackten Version von MySql unter Windows 10

Sehen Sie sich den Befehl zum Ändern der MySQL-Tabellenstruktur an

Beispielcode zur Implementierung eines dreispaltigen Layouts mit CSS, wobei die mittlere Spalte adaptiv ist und ihre Breite mit der Textgröße ändert

Detailliertes Tutorial zur Installation von Centos8 auf VMware

Befehlsliste des Baota Linux-Panels

Detailliertes Tutorial zur Installation von ffmpeg unter Linux

Sammlung von MySQL-Fuzzy-Abfrageanweisungen

Docker-Verbindung – MongoDB-Implementierungsprozess und Codebeispiele

Häufige Tomcat-Ausnahmen und Lösungscodebeispiele

MySQL-Dienst und Datenbankverwaltung

Detaillierte Erklärung zum Herunterladen, Installieren und Verwenden des Nginx-Servers

JavaScript zur Implementierung des Anmeldeformulars

Analyse des Prinzips und der Verwendung der kontinuierlichen MySQL-Aggregation

Beispielcode zur Implementierung einer einfachen Suchmaschine mit MySQL