Creare animazioni per sfondi con gradienti è un ottimo modo per rendere il tuo sito web più dinamico e visivamente accattivante. I gradienti sono sfumature composte da transizioni fluide tra due o più colori che possono essere applicate a vari elementi del design, inclusi gli sfondi. Quando aggiungiamo un'animazione alle sfumature, possiamo ottenere effetti visivi che catturano l'attenzione e migliorano l'esperienza complessiva di navigazione.
In questo articolo, creeremo un'animazione di sfondo con gradienti che cambiano colore utilizzando solo HTML e CSS. Impareremo ad utilizzare i gradienti lineari, ad impostare le dimensioni dello sfondo per creare un'animazione fluida e a definire keyframes per animare lo sfondo. Questo il risultato finale che otterremo:
Creiamo una struttura con HTML e CSS
Iniziamo creando una semplice struttura HTML e CSS per il nostro progetto.
La struttura HTML sarà molto semplice, con un elemento <div> che conterrà l'animazione di sfondo. Il nostro <div> sarà posizionato in modo tale da coprire l'intera area visibile del browser.
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Background Gradient Animation</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="animated-background"></div>
</body>
</html>Passiamo ora allo stile CSS, dove definiremo il gradiente animato.
/* Resetta margini e padding e imposta altezza e larghezza a 100% */
body, html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
/* Definisce lo stile per il div con sfondo animato */
.animated-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(270deg, #ff9a9e, #7666b8, #b6aae4, #ff9a9e);
background-size: 600% 600%;
animation: gradientAnimation 16s ease infinite;
}
/* Definisce le keyframes per l'animazione */
@keyframes gradientAnimation {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}Dettagli del codice CSS
body, htmlAbbiamo rimosso margini e padding predefiniti per evitare spazi indesiderati attorno all'elemento. Impostiamo l'altezza e la larghezza al 100% per fare in modo che l'elemento di sfondo copra l'intera area visibile del browser.overflow: hiddenassicura che eventuali contenuti in eccesso non siano visibili. Utilizziamodisplay: flex, justify-content: centerealign-items: centerper centrare eventuali contenuti nella pagina, anche se in questo esempio non ci sono contenuti aggiuntivi.- Con
.animated-backgroundposizioniamo l'elemento in modo assoluto per garantire che copra l'intero schermo. Utilizziamo un gradiente lineare con quattro colori che cambiano in modo continuo. background-size: 600% 600%è fondamentale per creare un effetto di animazione fluida. Questa impostazione ingrandisce il gradiente, permettendo di animarlo attraverso diverse posizioni.- Applichiamo l'animazione
gradientAnimationcon una durata di 16 secondi, in modo continuo (infinite), e un movimento fluido (ease). - Con
@keyframes gradientAnimationdefiniamo le fasi dell'animazione, spostando lo sfondo da sinistra a destra e poi di nuovo a sinistra. Questo crea un effetto di transizione fluida tra i colori.
Personalizzazione dell'output con HTML e CSS
Puoi personalizzare ulteriormente l'animazione:
- Colori del gradiente: cambia i colori nel
linear-gradientper adattarli alla tua palette. - Durata dell'animazione: modifica
16sper accelerare o rallentare il cambio di colore. - Direzione del gradiente: sperimenta con gli angoli nel
linear-gradient(ad esempio,90degper un gradiente verticale).
Movimenti per le animazioni
Dopo aver appreso le basi delle animazioni di gradienti di sfondo, vediamo come possiamo utilizzare diversi tipi di movimenti per creare effetti visivi accattivanti. Esploriamo quindi vari movimenti di animazione e vediamo come implementarli nel nostro codice.
Gradient Shift (spostamento del gradiente)
Il primo tipo di animazione che abbiamo visto è il Gradient Shift, che sposta il gradiente orizzontalmente. Questo tipo di animazione può essere utile per creare un effetto di movimento fluido.
@keyframes gradientShift {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
Oblique Shift (spostamento obliquo)
L'Oblique Shift sposta il gradiente in obliquo da un angolo all'altro. Questo effetto può dare una sensazione di profondità e dinamismo al tuo sfondo.
@keyframes diagonalShift {
0% {
background-position: 0% 0%;
}
50% {
background-position: 100% 100%;
}
100% {
background-position: 0% 0%;
}
}
Vertical Shift (spostamento verticale)
Il Vertical Shift sposta il gradiente dall'alto verso il basso e viceversa. È particolarmente utile quando si vuole creare un effetto di scorrimento verticale.
@keyframes verticalShift {
0% {
background-position: 50% 0%;
}
50% {
background-position: 50% 100%;
}
100% {
background-position: 50% 0%;
}
}
Circular Motion (movimento circolare)
Il Circular Motion fa muovere il gradiente in un percorso circolare. Questo tipo di animazione può essere usato per creare un effetto di rotazione continuo.
@keyframes circularMotion {
0% {
background-position: 50% 50%;
}
25% {
background-position: 100% 50%;
}
50% {
background-position: 50% 100%;
}
75% {
background-position: 0% 50%;
}
100% {
background-position: 50% 50%;
}
}
Gradient Zoom (zoom del gradiente)
Il Gradient Zoom crea un effetto in cui il gradiente sembra zoomare in avanti e indietro. Questo può aggiungere un tocco dinamico e coinvolgente al tuo design.
@keyframes gradientZoom {
0% {
background-size: 100% 100%;
}
50% {
background-size: 200% 200%;
}
100% {
background-size: 100% 100%;
}
}
Conclusioni: HTML e CSS per creare sfondi animati con gradienti
Abbiamo esplorato vari tipi di animazioni, come lo spostamento orizzontale, obliquo, verticale, il movimento circolare e l'effetto zoom. Ogni tipo di animazione può essere utilizzato per creare effetti unici e personalizzati, offrendo un'esperienza utente più dinamica. Ora divertiti a realizzare le animazioni che meglio si adattano alle tue creazioni!
