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

background-image: linear-gradient（）；

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.

background-position：

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)

MySQL-Datenbankoptimierung: Indeximplementierungsprinzip und Nutzungsanalyse

MySQL 8.0.20 Window10 kostenlose Installationsversion Konfiguration und Navicat Management Tutorial Grafik detaillierte Erklärung

1. MySQL 8.0.20 herunterladen und dekomprimieren ...

CSS3 zum Erzielen eines dynamischen Hintergrundverlaufseffekts

MySQL-Datenbankoptimierung: Indeximplementierungsprinzip und Nutzungsanalyse

Beispielanalyse der von MySQL 5.7 generierten Spaltennutzung

Sicherheitskonfiguration und Erkennung von SSL, nachdem die Website https aktiviert hat

MySQL implementiert Zeichenfolgenverkettung, Abfangen, Ersetzen und Positionssuchvorgänge

Docker verwendet Root, um in den Container zu gelangen

Beispielcode zur Implementierung einer Anmelde- und Registrierungsvorlage in Vue

Detaillierte Erläuterung des Organisationsstrukturdiagramms der Vue-Tree-Color-Komponente

Detaillierte Erklärung und Erweiterung von ref und reactive in Vue3

Docker führt Vorgänge mit dem angegebenen Speicher aus

Detaillierte Erläuterung der benutzerdefinierten Vue-Anweisungen

Artikel empfehlen

Bootstrap 3.0 Studiennotizen Rastersystemprinzip

Detaillierte Erläuterung des Befehls zum Bereinigen des MySQL-Datenbank-Binlogs

Detaillierte Schritte zum Portieren von Busybox zum Erstellen eines minimalen Root-Dateisystems

So migrieren Sie MySQL-Daten richtig nach Oracle

MySQL 8.0.20 Window10 kostenlose Installationsversion Konfiguration und Navicat Management Tutorial Grafik detaillierte Erklärung

So erstellen Sie einen MySQL-Cluster mit hoher Verfügbarkeit und Leistung

Zusammenfassung der JS-Tipps zum Erstellen oder Füllen von Arrays beliebiger Länge

Vue-Routing zum Implementieren der Login-Abfangung

So richten Sie die Verwendung der chinesischen Eingabemethode in Ubuntu 18.04 ein

Lernen Sie 10 Möglichkeiten zum horizontalen und vertikalen Zentrieren in CSS kennen (Zusammenfassung)

Analyse der Lösung für das Problem der gemeinsamen Nutzung von Nginx-Sitzungen

Detailliertes Tutorial zur Installation von MySQL unter WINDOWS

Beispiel für die Verwendung von MRG_MyISAM (MERGE) zur Implementierung einer Abfrage nach der Partitionierung in MySQL

Detaillierte Erläuterung der MySQL-Startoptionen und Beispiele für Systemvariablen

So setzen Sie das Root-Passwort in CentOS7 zurück