Questa semplice demo spiega come utilizzare le animazioni CSS per ottenere effetti visivi interessanti.
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.
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 un file sezione con la classe involucro per ospitare l'animazione.
Quindi, crea 10 div che rappresenteranno le bolle. All'interno di ogni div, crea uno span con la classe punto. Puoi impara questi tag HTML essenziali in 10 minuti se sei nuovo all'HTML.
<body>
<sectionclass="wrapper">
<h1>Animated Backgroundh1>
<div><spanclass="dot">span>div>
<div><spanclass="dot">span>div>
<div><spanclass="dot">span>div>
<div><spanclass="dot">span>div>
<div><spanclass="dot">span>div>
<div><spanclass="dot">span>div>
<div><spanclass="dot">span>div>
<div><spanclass="dot">span>div>
<div><spanclass="dot">span>div>
<div><spanclass="dot">span>div>
section>
body>Stile con codice CSS
Puoi creare cose 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.
.wrapperh1 {
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.
.wrapperdiv {
height: 60px;
width: 60px;
border: 2pxsolidrgba(255, 255, 255, 0.7);
border-radius: 100px;
position: absolute;
top: 10%;
left: 10%;
animation: 4slinearinfinite;
}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 dare un nome all'animazione animare; lo definirai in seguito utilizzando @keyframes.
Utilizzo ennesimo figlio (2) per affrontare il primo div dal primo figlio del .involucro l'elemento è il h1.
.wrapperdiv:nth-child(2) {
top: 20%;
left: 20%;
animation: animate 8slinearinfinite;
}.wrapperdiv:nth-child(3) {
top: 60%;
left: 80%;
animation: animate 10slinearinfinite;
}.wrapperdiv:nth-child(4) {
top: 40%;
left: 40%;
animation: animate 3slinearinfinite;
}.wrapperdiv:nth-child(5) {
top: 66%;
left: 30%;
animation: animate 7slinearinfinite;
}
.wrapperdiv:nth-child(6) {
top: 90%;
left: 10%;
animation: animate 9slinearinfinite;
}
Puoi dare ai div più bassi percentuali più alte in modo che salgano verso l'alto a intervalli diversi.
.wrapperdiv:nth-child(7) {
top: 30%;
left: 60%;
animation: animate 5slinearinfinite;
}.wrapperdiv:nth-child(8) {
top: 70%;
left: 20%;
animation: animate 8slinearinfinite;
}.wrapperdiv:nth-child(9) {
top: 75%;
left: 60%;
animation: animate 10slinearinfinite;
}.wrapperdiv:nth-child(10) {
top: 50%;
left: 50%;
animation: animate 6slinearinfinite;
}
.wrapperdiv:nth-child(11) {
top: 45%;
left: 20%;
animation: animate 10slinearinfinite;
}
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 rendi 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.
