So fügen Sie in CSS3 einem Hintergrundbild einen dynamischen Farbwechseleffekt hinzu

Im vorherigen Artikel „Verwenden Sie CSS3, um ein cooles dreieckiges Hintergrundbild zu erstellen“ haben wir Ihnen eine Methode zum Erstellen eines coolen dreieckigen Hintergrundbilds vorgestellt ~

Und im folgenden Artikel lassen Sie mich Machen Sie eine Einführung in eine Methode zum Erstellen cooler Hintergrundbilder und zeigen Sie, wie Sie mit CSS3 farbverändernde Hintergrundbildanimationen erstellen, um Ihre Webseiten attraktiver zu gestalten!

Schauen wir uns zuerst die Renderings an

Schauen wir uns an, wie man diesen Effekt erzielt:

Zuerst erstellen wir kein Tag, sondern setzen das Hintergrundbild direkt auf das Body-Tag

body {
   background-image: url("https://img.php.cn/upload/article/000/000/024/612360451cede816.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
}

Wie wäre es, wenn Sie die Farbe des Bildes ändern? Dies erfordert das Hinzufügen einer Farbebene als Überlagerung auf dem Hintergrundbild. Dies kann mit der Funktion linear-gradient() erreicht werden:

background-image: 
           linear-gradient(4deg, rgba(0,255,254,0.3) 50%, rgba(0,255,254,0.3) 100%),
   url("https://img.php.cn/upload/article/000/000/024/612360451cede816.jpg");

Zurzeit ist dies noch ein statischer Effekt Wirkung ständig wechselnder Farben? Wir können @keyframes und Animationsattribute verwenden, um Folgendes zu erreichen: Animationseffekte hinzufügen:

• Verwenden Sie Animationsattribute, um den Animationsnamen, die Wiedergabezeit, die Wiedergabezeiten usw. festzulegen:
  

body {
  background-image: url("https://img.php.cn/upload/article/000/000/024/612360451cede816.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  animation-name: background-overlay-animation;
  animation-duration: 5s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-timing-function: linear;
}

Animationsname: Angeben gebunden an den Namen des Keyframes des Selektors

animation-duration: Die Animation gibt an, wie viele Sekunden oder Millisekunden es dauert, bis sie abgeschlossen ist

animation-timing-function: Legt fest, wie die Animation einen Zyklus abschließt

animation-delay: Legt fest Verzögerungsintervall, bevor die Animation startet.

animation-iteration-count: Definieren Sie, wie oft die Animation abgespielt wird.

animation-direction: Geben Sie an, ob die Animation der Reihe nach rückwärts abgespielt werden soll.

animation-fill-mode: Gibt den Stil an, der auf das Element angewendet werden soll, wenn die Animation nicht abgespielt wird (wenn die Animation abgeschlossen ist oder wenn es eine Verzögerung gibt, bevor die Animation abgespielt wird).

animation-play-state: Gibt an, ob die Animation läuft oder pausiert.

• Verwenden Sie @keyframes, um jeden Frame der Animation zu definieren:

@keyframes background-overlay-animation {
  0%   {
      background-image: 
        linear-gradient(4deg, rgba(255,78,36,0.3) 50%, rgba(255,78,36,0.3) 100%), 
		url("https://img.php.cn/upload/article/000/000/024/612360451cede816.jpg");
  }
  25%  {
      background-image: 
         linear-gradient(4deg, rgba(213,49,127,0.3) 50%, rgba(213,49,127,0.3) 100%), 
		 url("https://img.php.cn/upload/article/000/000/024/612360451cede816.jpg");
  }
  50%  {
    background-image: 
       linear-gradient(4deg, rgba(36,182,255,0.3) 50%, rgba(36,182,255,1) 100%),
     url("https://img.php.cn/upload/article/000/000/024/612360451cede816.jpg");
  }
  100% {
    background-image: 
        linear-gradient(4deg, rgba(0,255,254,0.3) 50%, rgba(0,255,254,0.3) 100%),
        url("https://img.php.cn/upload/article/000/000/024/612360451cede816.jpg");
  }
}

Der vollständige Code ist unten angegeben:

Die PHP-Chinese-Website-Plattform verfügt über viele Video-Lehrressourcen, die jeder gerne lernen kann. " CSS-Video-Tutorial"!

Das obige ist der detaillierte Inhalt vonSo fügen Sie in CSS3 einem Hintergrundbild einen dynamischen Farbwechseleffekt hinzu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!