So erzielen Sie einen dynamischen Verlaufseffekt des Webseitenhintergrunds in CSS-CSS-Tutorial-php.cn

So erzielen Sie einen dynamischen Verlaufseffekt des Webseitenhintergrunds in CSS

王林

Freigeben： 2020-04-16 09:14:08

nach vorne

3345 Leute haben es durchsucht

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>

Nach dem Login kopieren

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%;
  }
}

Nach dem Login kopieren

Der Effekt ist wie gezeigt:

So erzielen Sie einen dynamischen Verlaufseffekt des Webseitenhintergrunds in CSS

Punkte:

 background-image: linear-gradient（）；

Nach dem Login kopieren

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：

Nach dem Login kopieren

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;

Nach dem Login kopieren

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!