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
Handbuch zur MySQL-Volltextindizierung
Die Volltextindizierung erfordert eine spezielle ...
Lösung für das Problem, dass Docker CMD/ENTRYPOINT das sh-Skript ausführt: nicht gefunden/run.sh:
Es gibt kein Problem mit der Dockerfile-Konfigura...
Grundlegende Operationen an unsichtbaren Spalten in MySQL 8.0
Inhaltsverzeichnis 01 Unsichtbare Spalten erstell...
Implementierung eines einfachen Chatroom-Dialogs basierend auf WebSocket
In diesem Artikel finden Sie den spezifischen Cod...
Linux-Kernel-Gerätetreiber. Zusammenfassung der Hinweise zum Lademechanismus von Linux-Kernelmodulen.
#include <linux/moduleparam.h> 1. Modulpara...
So installieren und implementieren Sie einen FTP-Image-Server unter Linux
Lesen Sie das Tutorial zum Einrichten eines FTP-S...
MySQL 8.0.17 Installations- und einfaches Konfigurationstutorial unter macOS
Wenn Sie nicht verstehen, was ich geschrieben hab...
Schritte zum Exportieren der Felder und zugehörigen Attribute von MySQL-Tabellen
Müssen die Felder und Eigenschaften der Tabelle i...
Detaillierter Vergleich von Ember.js und Vue.js
Inhaltsverzeichnis Überblick Warum ein Framework ...
Ändern Sie die MySQL-Datenbank-Engine in InnoDB
PS: Ich verwende hier PHPStudy2016 1. Stoppen Sie...
Welche Arten von MySQL-Verbindungsabfragen kennen Sie?
Vorwort Wenn die Abfrageinformationen aus mehrere...
Beispiel zum Ändern des Zeilenabstands einer HTML-Tabelle
Bei der Verwendung von HTML-Tabellen müssen wir m...
Persönliche Meinung: Sprechen Sie über Design
<br />Wählen Sie das praktischste Thema aus....
Regenbogen-Button-Stil erstellt mit CSS3
Ergebnis: Implementierungscode: html <div Klas...
Lösung für den Fehler „Disk sda contains BIOS RAID metadata“ bei der Installation von CentOS 6.x
Als ich heute CentOS6.2 installierte, kam ich nic...