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
Rsync+crontab regelmäßige Synchronisierungssicherung unter centos7
In letzter Zeit möchte ich regelmäßig wichtige in...
So verwenden Sie Cron-Jobs, um PHP regelmäßig unter Cpanel auszuführen
Öffnen Sie das cPanel-Verwaltungs-Backend. Unter ...
Beispiel für die Verwendung von JSX zur Entwicklung einer Markup-Komponente (Front-End-Komponentenbildung)
Inhaltsverzeichnis Aufbau einer JSX-Umgebung NPM ...
So installieren Sie MySQL 5.7 unter Ubuntu und konfigurieren den Datenspeicherpfad
1. MySQL installieren Dieser Artikel wird über AP...
Eine "klassische" Falle der MySQL UPDATE-Anweisung
Inhaltsverzeichnis 1. Problematische SQL-Anweisun...
Meta Viewport ermöglicht die Vollbildanzeige von Webseiten auf dem iPhone
In meiner Verzweiflung dachte ich plötzlich: Wie i...
So verstehen Sie SELinux unter Linux
Inhaltsverzeichnis 1. Einführung in SELinux 2. Gr...
So lösen Sie die Elementbewegung, die durch einen per Hover generierten Rahmen verursacht wird
Vorwort Manchmal verschiebt sich der Inhalt des E...
Tutorial zur Installation des Nvidia-Grafikkartentreibers in Ubuntu 18.04 (mit Bildern und Text)
0. Vorbereitende Maßnahmen Deaktivieren Sie den s...
Einfache Verwendung des Vue Vee-Validate-Plugins
Inhaltsverzeichnis 1. Installation 2. Import 3. V...
Detaillierte Erklärung der grundlegenden Syntax und Datentypen von JavaScript
Inhaltsverzeichnis JavaScript importieren 1. Inte...
Detaillierte Erklärung zur Verwendung der JavaScript-Paging-Komponente
Die Paginierungskomponente ist eine häufige Kompo...
Detailliertes Tutorial zum Bereitstellen von Jenkins basierend auf Docker
0. Als ich dieses Dokument erstellte, war es unge...
Lassen Sie uns ausführlich über die Richtung der langsamen SQL-Optimierung in MySQL sprechen
Inhaltsverzeichnis Vorwort SQL-Anweisungsoptimier...
So stellen Sie Kafka in Docker bereit
Inhaltsverzeichnis 1. Docker erstellen 2. Betrete...