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
CocosCreator - modulares Lernskript
Modulares Cocos Creator-Skript Mit Cocos Creator ...
So definieren Sie Datenbeispiele in Vue
Vorwort Im Entwicklungsprozess ist das Definieren...
Vue implementiert grafischen Überprüfungscode
In diesem Artikelbeispiel wird der spezifische Co...
Tiefgreifendes Verständnis mathematischer Ausdrücke in CSS calc()
Der mathematische Ausdruck calc() ist eine Funkti...
Idea konfiguriert Tomcat zum Starten eines Webprojekts - Grafik-Tutorial
Tomcat konfigurieren 1. Klicken Sie auf „Konfigur...
Beispiel für die Implementierung eines dynamischen Überprüfungscodes auf einer Seite mithilfe von JavaScript
Einführung: Heutzutage werden bei der Anmeldung o...
Eine schnelle Lösung für den ersten Anmeldefehler in mysql5.7.20
Zunächst stellen wir vor, wie (1) MySQL 5.7 hat e...
Implementierung von Docker zum Aufbau eines privaten Warehouse (Registrierung und Harbor)
Da immer mehr Docker-Images verwendet werden, mus...
Vue implementiert den automatischen Sprung zur Anmeldeseite, wenn das Token abläuft
Das Projekt wurde in diesen Tagen getestet und de...
In diesem Artikel erfahren Sie mehr über NULL in MySQL
Inhaltsverzeichnis Vorwort NULL in MySQL 2 NULL b...
MySQL fügt schnell 100 Millionen Testdaten ein
Inhaltsverzeichnis 1. Erstellen Sie eine Tabelle ...
Beispiel für die Verwendung von CASE WHEN beim Sortieren in MySQL
Vorwort In einem früheren Projekt wurde die Sorti...
So simulieren Sie eine Aufzählung mit JS
Vorwort Im aktuellen JavaScript gibt es kein Konz...
Einführung in die Apache-Bereitstellung von https in der Kryptografie
Inhaltsverzeichnis Zweck Experimentelle Umgebung ...
Tutorial zu HTML-Formular-Tags (2):
Dieses Tutorial stellt die Anwendung verschiedene...