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, htmloverflow: hiddendisplay: flex, justify-content: centeralign-items: center- Con
.animated-background background-size: 600% 600%- Applichiamo l'animazione
gradientAnimationinfiniteease - Con
@keyframes gradientAnimation
Personalizzazione dell'output con HTML e CSS
Puoi personalizzare ulteriormente l'animazione:
- Colori del gradiente
linear-gradient - Durata dell'animazione
16s - Direzione del gradiente
linear-gradient90deg
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!
