Kreativer Eröffnungseffekt durch die Kombination von CSS 3.0 mit Video
|
Ich möchte Ihnen einen kreativen Einstieg vorstellen, der durch die Kombination von CSS 3.0 mit Video realisiert wurde. Der Effekt ist wie folgt:
Nachfolgend sehen Sie die Code-Implementierung. Sie können diese gerne kopieren, einfügen und sammeln.
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
<meta http-equiv="X-UA-kompatibel" content="ie=edge">
<title>Kreativer Einstieg realisiert durch CSS 3.0 kombiniert mit Video</title>
<Stil>
* {
Rand: 0;
Polsterung: 0;
Schriftfamilie: „Poppins“, serifenlos;
}
Körper {
Anzeige: Flex;
Elemente ausrichten: zentrieren;
Inhalt ausrichten: zentriert;
Mindesthöhe: 100vh;
Hintergrund: #000;
}
h2 {
Position: relativ;
Schriftgröße: 3,4em;
Schriftstärke: 900;
Farbe: #fff;
Z-Index: 1;
Überlauf: versteckt;
Rand: 20px 20px 0 0;
}
h2 Spanne {
Farbe: #ff022c;
}
h2::vor {
Inhalt: '';
Position: absolut;
links: -20%;
Breite: 120%;
Höhe: 100%;
Hintergrund: linearer Farbverlauf (90 Grad, transparent 0 %, #000 5 %, #000 100 %);
Animation: 5,5 s linear vorwärts animieren;
Animationsverzögerung: 2 s;
}
@keyframes animieren {
0% {
links: -20%;
}
100 % {
links: 110%;
}
}
Video
Position: absolut;
oben: 0;
links: 0;
Breite: 100 %;
Höhe: 100%;
Objekt-Passung: Abdeckung;
Z-Index: 2;
Zeigerereignisse: keine;
Mix-Blend-Modus: Bildschirm;
}
</Stil>
</Kopf>
<Text>
<video src="https://klxxcdn.oss-cn-hangzhou.aliyuncs.com/histudy/hrm/media/08reverse.mp4" Autoplay stummgeschaltet></video>
<h2><span>Wir</span> müssen</span> auch COVID-19</span> bekämpfen</h2>
</body>
</html>Zusammenfassen Dies ist das Ende dieses Artikels über die kreative Eröffnung, die durch die Kombination von CSS 3.0 mit Video erreicht wird. Weitere relevante Inhalte zur CSS-Videoeröffnung finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird! |
Artikel empfehlen
PHP geplante Backup MySQL und mysqldump Syntax-Parameter detailliert
Lassen Sie uns zunächst einige gängige Anwendungs...
Flexibles CSS-Layout FLEX, Medienabfrage und Implementierung von mobilen Klickereignissen
flexibles Layout Definition: Das Element des Flex...
Allgemeine Linux-Befehle chmod zum Ändern der Dateiberechtigungen 777 und 754
Der folgende Befehl wird häufig verwendet: chmod ...
Detaillierte Erklärung der JavaScript-Ereigniskonzepte (Unterscheidung zwischen statischer und dynamischer Registrierung)
Inhaltsverzeichnis Ereignisse in js Ereignistyp H...
Vollständige MySQL-Lernhinweise
Inhaltsverzeichnis MyISAM und InnoDB Gründe für L...
Detaillierte Erklärung zum Aktivieren des langsamen Abfrageprotokolls in der MySQL-Datenbank
Die Datenbank ermöglicht langsame Abfrageprotokol...
Lösung für den MySQL-Fehlercode 1064
Wenn die Wörter in der SQL-Anweisung mit den Schl...
Detaillierte Erklärung zur Verwendung des scp-Befehls zum Remote-Kopieren von Dateien unter Linux
Vorwort scp ist die Abkürzung für „Secure Copy“. ...
Implementierungsmethode für horizontale und vertikale MySQL-Tabellenkonvertierungsvorgänge
Dieser Artikel veranschaulicht anhand von Beispie...
Implementierung eines Docker-Cross-Host-Netzwerks (Overlay)
1. Docker-Cross-Host-Kommunikation Zu den hostübe...
Deaktivieren der AutoVervollständigen-Funktion im Eingabefeld
Jetzt können wir ein Eingabeattribut namens „Autov...
Detaillierte Erläuterung der MySQL-Benutzerrechteverwaltung
Inhaltsverzeichnis Vorwort: 1. Einführung in die ...
Vollständige MySQL-Collapse-Abfrage, reguläre Übereinstimmung, ausführliche Erklärung
Überblick Im vorherigen Kapitel haben wir die Fil...
Ein Artikel, der Ihnen hilft, die Grundlagen von VUE zu verstehen
Inhaltsverzeichnis Was ist VUE Kern-Plugins in Vu...
So aktualisieren Sie die Ansicht synchron nach Datenänderungen in Vue
Vorwort Vor kurzem bin ich auf ein interessantes ...