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
Detaillierte Erklärung des Abstandsproblems zwischen IMG-Tags
Grundlegende Analyse des IMG-Tags: In HTML5 beste...
Beispiel für eine Domänennamenüberprüfungsmethode für Betrieb und Wartung von Nginx
Beim Konfigurieren des Domänennamens der Schnitts...
So verwenden Sie den regulären Matching-Selektor für CSS-Attributwerte (Tipps)
Es gibt drei Typen von regulären Matching-Selekto...
Lösen Sie das Problem des Tomcat 404-Fehlers bei der Bereitstellung von Spring Boot + Jar-Verpackungen
1. Spring Boot unterstützt kein JSP-JAR-Paket, JS...
Implementierung der Master-Slave-Replikation im Docker Compose-Deployment
Inhaltsverzeichnis Konfigurationsanalyse Dienstle...
Vue implementiert ein einfaches Einkaufswagenbeispiel
In diesem Artikelbeispiel wird der spezifische Co...
React implementiert ein allgemeines Beispiel für eine Skelett-Bildschirmkomponente
Inhaltsverzeichnis Was ist ein Skelettsieb? Demo ...
Was ist nach der Installation von Ubuntu 20.04 zu tun (Anleitung für Anfänger)
Ubuntu 20.04 wurde veröffentlicht und bringt viel...
Grafisches Tutorial zur Installation und Konfiguration von MySQL Community Server 8.0.11
Ich habe vor Kurzem angefangen, mich mit Datenban...
Navicat für MySql Visueller Import von CSV-Dateien
In diesem Artikel wird der spezifische Code von N...
JavaScript-Modularität erklärt
Inhaltsverzeichnis Vorwort: 1. Konzept 2. Die Vor...
Methoden und Schritte zum Erstellen eines Docker-basierten Nginx-Dateiservers
1. Erstellen Sie auf diesem Computer eine neue Ko...
Detailliertes Tutorial zur Installation von InfluxDB in Docker (Leistungstest)
1. Voraussetzungen 1. Das Projekt wurde bereitges...
Beispielcode für den dynamischen CSS-Ladebalkeneffekt
Mit dem Wissen über CSS-Variablen werde ich den C...
Detaillierte Erläuterung des Front-End-Frameworks für die niedrigschwellige Entwicklung von iOS-, Android- und Miniprogrammanwendungen
Heutzutage ist plattformübergreifende Entwicklung...