Aggiungere uno sfondo animato al tuo sito web o alla tua applicazione può contribuire a creare un design unico e interessante. Gli sfondi creativi possono suscitare emozioni e migliorare l’esperienza dell’utente.
Esistono molti modi per creare uno sfondo animato per la tua applicazione, ma una semplice combinazione di semplici HTML e CSS funziona particolarmente bene. Dai un’occhiata a questo esempio, scopri come funziona il suo codice e guarda una demo dal vivo dello sfondo animato finale.
Sommario:
Crea la struttura HTML
Creerai uno sfondo di colore blu con bolle che crescono e fluttuano verso l’alto. Puoi vedere il risultato finale su questo Codepen.
Inizia creando una sezione con il wrapper della classe per ospitare l’animazione.
Quindi, crea 10 div che rappresenteranno le bolle. All’interno di ogni div, crea uno span con il punto della classe. Puoi imparare questi tag HTML essenziali in 10 minuti se sei nuovo all’HTML.
<body>
<section class="wrapper">
<h1>Animated Background</h1>
<div><span class="dot"></span></div>
<div><span class="dot"></span></div>
<div><span class="dot"></span></div>
<div><span class="dot"></span></div>
<div><span class="dot"></span></div>
<div><span class="dot"></span></div>
<div><span class="dot"></span></div>
<div><span class="dot"></span></div>
<div><span class="dot"></span></div>
<div><span class="dot"></span></div>
</section>
</body>
Stile con codice CSS
Puoi creare incredibili effetti di sfondo utilizzando solo HTML. Ma per questo progetto utilizzerai i CSS per modellare e animare lo sfondo.
Innanzitutto, imposta il margine e il riempimento su 0 per garantire che non ci siano spazi attorno allo sfondo.
* {
margin: 0;
padding: 0;
}
Quindi, modella la sezione genitore utilizzando la classe wrapper. Questa sezione avrà larghezza e altezza al 100% per riempire l’intera pagina. Imposta il colore di sfondo come una tonalità di blu e assegnagli una posizione assoluta.
.wrapper {
height: 100%;
width: 100%;
background-color: #0066cc;
position: absolute;
}
Personalizza l’H1 anche con una posizione assoluta. Per posizionarlo al centro della pagina, inizia impostando la sua posizione in alto a sinistra al 50%. Quindi usa la traduzione per spostarlo in alto e a sinistra, in modo che il suo centro sia esattamente al centro.
.wrapper h1 {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
font-family: sans-serif;
word-spacing: 2px;
color: #fff;
font-size: 2rem;
font-weight: 900;
}
Successivamente, modella i div che saranno circolari per fungere da bolle animate. Assegna a ciascun div un’altezza, una larghezza e un bordo. L’ampio raggio del bordo garantisce che il bordo sia un cerchio. Inoltre, imposta la durata dell’animazione utilizzando la proprietà di animazione CSS.
.wrapper div {
height: 60px;
width: 60px;
border: 2px solid rgba(255, 255, 255, 0.7);
border-radius: 100px;
position: absolute;
top: 10%;
left: 10%;
animation: 4s linear infinite;
}
Modella i punti con un’altezza e una larghezza di 5px. Dai ai punti un raggio del bordo e uno sfondo bianco. Posiziona ciascuno in modo assoluto, vicino all’angolo in alto a destra del div genitore.
div .dot {
height: 5px;
width: 5px;
border-radius: 50px;
background: rgba(255, 255, 255, 0.5);
position: absolute;
top: 20%;
right: 20%;
}
Successivamente, utilizza il selettore nth-child per posizionare ciascun div con impostazioni diverse. Puoi nominare l’animazione animata; lo definirai in seguito utilizzando @keyframes.
Usa nth-child(2) per indirizzare il primo div poiché il primo figlio dell’elemento .wrapper è h1.
.wrapper div:nth-child(2) {
top: 20%;
left: 20%;
animation: animate 8s linear infinite;
}.wrapper div:nth-child(3) {
top: 60%;
left: 80%;
animation: animate 10s linear infinite;
}
.wrapper div:nth-child(4) {
top: 40%;
left: 40%;
animation: animate 3s linear infinite;
}
.wrapper div:nth-child(5) {
top: 66%;
left: 30%;
animation: animate 7s linear infinite;
}
.wrapper div:nth-child(6) {
top: 90%;
left: 10%;
animation: animate 9s linear infinite;
}
Puoi dare ai div più bassi percentuali più alte in modo che salgano verso l’alto a intervalli diversi.
.wrapper div:nth-child(7) {
top: 30%;
left: 60%;
animation: animate 5s linear infinite;
}.wrapper div:nth-child(8) {
top: 70%;
left: 20%;
animation: animate 8s linear infinite;
}
.wrapper div:nth-child(9) {
top: 75%;
left: 60%;
animation: animate 10s linear infinite;
}
.wrapper div:nth-child(10) {
top: 50%;
left: 50%;
animation: animate 6s linear infinite;
}
.wrapper div:nth-child(11) {
top: 45%;
left: 20%;
animation: animate 10s linear infinite;
}
Utilizza @keyframes per modificare e ruotare gradualmente i cerchi e i punti a intervalli diversi. Nel codice seguente i punti ruotano di 70 gradi e i cerchi di 360. Questa rotazione crea l’effetto bolla.
@keyframes animate {
0% {
transform: scale(0) translateY(0) rotate(70deg);
}
100% {
transform: scale(1.3) translateY(-100px) rotate(360deg);
}
}
Puoi rendere gli sfondi più eleganti utilizzando i modelli CSS. I pattern ti consentono di creare onde, griglie, foglie e altri pattern per aiutarti a creare animazioni straordinarie.
Puoi animare molte proprietà usando i CSS
Puoi creare diversi tipi di animazioni utilizzando i CSS. Questi includono la modifica del colore di sfondo e il ritardo nell’esecuzione di un’animazione.
Puoi anche impostare la frequenza con cui deve essere eseguita un’animazione, anche all’infinito. Puoi anche impostare la direzione in cui dovrebbe muoversi l’animazione: avanti o indietro. È divertente giocare con le animazioni e puoi usarle per dare vita alle tue applicazioni.