Animierter Farbverlauf-Hintergrund

Ein wunderschöner, sanft animierter Farbverlauf-Hintergrund, der ausschließlich mit CSS implementiert wurde. Durch die Verwendung von Keyframe-Animationen zur Verschiebung der Hintergrundposition entsteht ein fließender, dynamischer Farbwechsel.

Code

Kopieren Sie den folgenden Code, um diesen Effekt in Ihr Projekt zu integrieren.

<div class="animated-gradient-bg"></div>

.animated-gradient-bg {
  width: 100%;
  height: 100vh;
  background: linear-gradient(
    45deg,
    #ff7b00,
    #ff0055,
    #a200ff,
    #0055ff,
    #00ffcc
  );
  background-size: 400% 400%;
  animation: gradient-flow 15s ease infinite;
}

@keyframes gradient-flow {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

Erläuterung

Die wesentlichen Merkmale dieses animierten Hintergrunds sind die folgenden zwei Eigenschaften:

1. background-size: 400% 400%: Die Größe des Farbverlaufs wird auf das Vierfache des Elements herausskaliert, sodass er über den sichtbaren Bereich hinausragt.
2. @keyframes gradient-flow: Durch die sanfte Verschiebung der background-position von 0% auf 100% und wieder zurück auf 0% entsteht die Illusion, dass sich der vergrößerte Farbverlauf bewegt und fließend die Farben wechselt.

Durch Anpassen der Farben im linear-gradient und der Dauer in der animation können Sie den Effekt perfekt auf das Design Ihrer Website abstimmen.