CSS3 zum Erzielen eines dynamischen Hintergrundverlaufseffekts
|
Beim Erlernen von CSS3 geht es mehr darum, sich mit neuen Funktionen und grundlegenden Theorien vertraut zu machen. Dieser Artikel verwendet eine Fallstudie, um Ihnen dabei zu helfen, einige theoretische Kenntnisse in CSS3 zu verstehen, und fasst einige Techniken zusammen, mit denen Sie Ihre Entwicklungseffizienz verbessern können.
In diesem Fall (Hintergrundfarbverlauf) kann mit CSS3 der Effekt eines Hintergrundfarbverlaufs erzielt werden. HTML-Teil:
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<title> Farbverlauf – Skyline </title>
<link rel="stylesheet" type="text/css" href="style.css">
</Kopf>
<Text>
<div Klasse="Text">
Farbverlauf – Skyline</div>
</body>
</html>Um einen Farbverlauf im Hintergrund zu erzielen, müssen Sie im HTML-Teil (Struktur) nichts tun. Hier ist eine Textzeile, um den Anzeigeeffekt zu erleichtern; CSS-Teil:
Körper{
Rand: 0;
Polsterung: 0;
Schriftfamilie: „Montserrat“;
Hintergrundbild: linearer Farbverlauf (125 Grad, #E4FFCD, #6DD5FA, #2980B9, #E4FFCD); Hintergrundgröße: 400 %;
Animation: Animation starten 15s unendlich;
}
.Text{
Farbe: weiß;
Textausrichtung: zentriert;
Texttransformation: Großbuchstaben;
Rand: 400px 0;
Schriftgröße: 22px;
}
@keyframes Startimation {
0 %{
Hintergrundposition: 0 % 50 %;
}
50 %{
Hintergrundposition: 100 % 50 %;
}
100 %{
Hintergrundposition: 0 % 50 %;
}
}Wichtige Punkte: Einige der Inhalte wurden bereits zuvor erwähnt (Wasserwellen): https://www.jb51.net/css/672226.html Mit der Funktion linear-gradient() wird ein „Bild“ mit linearem Farbverlauf erstellt. Um einen linearen Farbverlauf zu erstellen, müssen Sie einen Startpunkt und eine Richtung (angegeben als Winkel) für die Bewegung des Farbverlaufs festlegen. Außerdem müssen Sie die Endfarbe definieren. Die Endfarbe ist die Farbe, zu der Gecko einen sanften Übergang erzielen soll. Sie müssen mindestens zwei Farben angeben. Sie können jedoch auch mehr Farben angeben, um komplexere Verlaufseffekte zu erzielen. Mit „125 Grad“ wird der Neigungswinkel des Gradienten eingestellt. Die Eigenschaft legt die Startposition des Hintergrundbildes fest. Sie können auch diesen Tapetenverlauf ausprobieren:
Hintergrund: weiß;
Hintergrundbild: linearer Farbverlauf (90 Grad,
rgba(200,0,0,.5) 50%, transparent 0),
linearer Gradient(
rgba(200,0,0,.5) 50%, transparent 0);
Hintergrundgröße: 30px 30px;Zusammenfassen Oben ist das CSS3, das ich Ihnen vorgestellt habe, um den dynamischen Farbverlaufseffekt des Hintergrunds zu erzielen. Ich hoffe, es wird Ihnen hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und ich werde Ihnen rechtzeitig antworten. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken! Wenn Sie diesen Artikel hilfreich finden, können Sie ihn gerne abdrucken und dabei bitte die Quelle angeben. Vielen Dank! |
<<: 4 Prinzipien für sauberes und schönes Webdesign
>>: Informationen zum Textumbruchproblem bei IE-Labels (LI)
Artikel empfehlen
Eine Frage zur Einstellung des Randradius-Werts
Problemdatensatz Heute wollte ich ein kleines Bau...
Implementierungsbeispiel eines React-Projekts von der Neuerstellung bis zur Bereitstellung
Neues Projekt starten Dieser Artikel zeichnet hau...
Detaillierte Erklärung zur Verwendung von Javascript zur Behandlung allgemeiner Ereignisse
Inhaltsverzeichnis 1. Formularereignisse 2. Mause...
Vue3 kapselt die Lupeneffektkomponente der Jingdong-Produktdetailseite
In diesem Artikel wird der spezifische Code der V...
Implementierung von Docker zum Erstellen eines Zookeeper- und Kafka-Clusters
Ich habe vor Kurzem Kafka gelernt. Als ich mich d...
So installieren Sie Postgres 12 + pgadmin im lokalen Docker (unterstützt Apple M1)
Inhaltsverzeichnis einführen Unterstützt Intel-CP...
Detailliertes Tutorial zum Ausführen von Selenium+Chromedriver auf dem Server
1. Einleitung Ich möchte Selenium verwenden, um D...
Interaktion im Webdesign: Eine kurze Diskussion über Paging-Probleme
Funktion: Zur vorherigen Seite oder zur nächsten ...
Ausführliche Erklärung des Maximalwerts von int in MySQL
Einführung Ich werde ausführlich über das Problem...
Verkürzen Sie die Seiten-Rendering-Zeit, damit die Seite schneller läuft
Wie kann die Seiten-Rendering-Zeit im Browser so ...
jQuery+Ajax zum Erreichen eines einfachen Paging-Effekts
In diesem Artikel wird der spezifische Code von j...
Tipps zum Implementieren mehrerer Rahmen in CSS
1. Mehrere Grenzen[1] Hintergrund: Box-Shadow, Um...
Win10 Installation Linux System Tutorial Diagramm
Um eine virtuelle Maschine auf einem Windows-Syst...
Änderung des Zeitzonenproblems von MySQL-Containern in Docker
Vorwort Als Ahhang das Springboot-Projekt entwick...
VUE + OPENLAYERS erreicht Echtzeit-Positionierungsfunktion
Inhaltsverzeichnis Vorwort 1. Etikettenstil defin...