CSS3: animazione arcobaleno in background

Per creare un’animazione arcobaleno in background in una o più pagine web, dobbiamo scrivere il codice CSS3 in questo modo:

body {
  background: linear-gradient(to right, 
    hsl(0, 100%, 50%),
    hsl(60, 100%, 50%),
    hsl(120, 100%, 50%),
    hsl(180, 100%, 50%),
    hsl(240, 100%, 50%),
    hsl(300, 100%, 50%));
  background-size: 400% 400%;
  animation: Gradient 15s ease infinite;
}

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

In questo codice, utilizziamo un gradiente lineare per creare un insieme di sfumature di colori che scorrono da destra a sinistra. La proprietà “background-size” viene impostata su 400% 400% per creare un effetto di ripetizione. Infine, utilizziamo l’animazione “Gradient” per creare un effetto di scorrimento continuo.