Heim >Web-Frontend >CSS-Tutorial >So erzielen Sie einen dynamischen Verlaufseffekt des Webseitenhintergrunds in CSS
HTML-Teil:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> 渐变——天际线</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div>
渐变——天际线
</div>
</body>
</html>Es ist keine Operation im HTML-Teil (Struktur) erforderlich, um einen Hintergrundfarbverlauf zu erzielen. Hier wird eine Textzeile hinzugefügt um den Anzeigeeffekt zu erleichtern;
(Empfohlenes Tutorial: CSS-Tutorial)
CSS-Teil:
body{
margin: 0;
padding: 0;
font-family: "montserrat";
background-image: linear-gradient(125deg,#E4FFCD,#6DD5FA,#2980B9,#E4FFCD); background-size: 400%;
animation: bganimation 15s infinite;
}
.text{
color: white;
text-align: center;
text-transform: uppercase;
margin: 400px 0;
font-size: 22px;
}
@keyframes bganimation {
0%{
background-position: 0% 50%;
}
50%{
background-position: 100% 50%;
}
100%{
background-position: 0% 50%;
}
}Der Effekt ist wie gezeigt:
Punkte:
background-image: linear-gradient（）；
Die Funktion linear-gradient() wird verwendet, um ein „Bild“ eines linearen Farbverlaufs zu erstellen. Um einen linearen Farbverlauf zu erstellen, müssen Sie einen Startpunkt und eine Richtung (angegeben als Winkel) für den Farbverlaufseffekt festlegen. Sie müssen auch die Endfarbe definieren. Die Stoppfarbe ist der sanfte Übergang, den Gecko erstellen soll. Sie müssen mindestens zwei angeben. Sie können jedoch auch weitere Farben angeben, um komplexere Verlaufseffekte zu erzielen.
Mit „125 Grad“ wird der Neigungswinkel des Farbverlaufs festgelegt. Mit dem Attribut
background-position：
wird die Startposition des Hintergrundbilds festgelegt.
Sie können auch diesen Hintergrundverlauf ausprobieren:
background:white;
background-image: linear-gradient(90deg,
rgba(200,0,0,.5) 50%, transparent 0),
linear-gradient(
rgba(200,0,0,.5) 50%, transparent 0);
background-size: 30px 30px;Empfohlenes Video-Tutorial: CSS-Video-Tutorial
Das obige ist der detaillierte Inhalt vonSo erzielen Sie einen dynamischen Verlaufseffekt des Webseitenhintergrunds in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!