Questo articolo fornirà:
- Metodo 1: effetto dissolvenza in entrata utilizzando la proprietà di animazione CSS
- Metodo 2: effetto dissolvenza in entrata utilizzando la proprietà di transizione CSS
Metodo 1: effetto dissolvenza in entrata utilizzando la proprietà 'animazione' CSS
Per progettare una semplice pagina HTML, aggiungi il seguente elemento su di essa:
- Aggiungi il ' ” insieme all'elemento “ stile 'attributo. L'attributo 'style' contiene le proprietà di stile dell'elemento.
- Applicare il ' colore ” nell'attributo style per definire il colore del testo dell'elemento.
- Successivamente, usa il ' ” per aggiungere del testo o un semplice paragrafo.
Di seguito è riportato il codice HTML:
< h2 stile = 'colore: rgb(84, 8, 191)' >
Sito web tutorial di Linuxhint
< / h2 >
< p > effetto dissolvenza al caricamento della pagina < / p >
La pagina HTML è stata creata correttamente:
Nella sezione CSS, per applicare l'effetto di dissolvenza sulla pagina, il ' animazione ' La proprietà CSS verrà utilizzata sul '
Elemento 'corpo' di stile
corpo {animazione: fadeInPage facilità 3s;
conteggio-iterazione-animazione: uno ;
}
Il '
- “ animazione ” è la proprietà abbreviata che imposta l'animazione specificando più valori. Qui vengono definiti il nome dell'animazione, la funzione di temporizzazione dell'animazione e la durata dell'animazione.
- “ conteggio-iterazione-animazione ” definisce quante volte deve essere ripetuta l'animazione.
Applicare le regole '@keyframes' su 'animazione'
@keyframes fadeInPage {0 % {
opacità: 0 ;
}
100 % {
opacità: uno ;
}
}
Per definire il “ @keyframe ” regole per l'animazione, menzionare il nome dell'animazione dopo la parola chiave @keyframes. Modificare il comportamento dell'animazione come segue:
- In ' 0% ” animazione, il “ opacità ” viene assegnato il valore 0. Significa che quando inizia l'animazione, l'immagine è trasparente.
- In ' 100% ” animazione, l'opacità è impostata su “ uno ”, che si riferisce a un colore solido.
Produzione
Andiamo avanti verso il secondo metodo per applicare l'effetto Fade-in al caricamento della pagina.
Metodo 2: effetto dissolvenza in entrata utilizzando la proprietà 'transizione' CSS
Aggiungi un ' onload attributo ' all'interno del '
In questo esempio, il CSS ' transizione La proprietà ” viene utilizzata per aggiungere un effetto di dissolvenza in apertura:
corpo {opacità: 0 ;
transizione: opacità 6s;
}
Di seguito la spiegazione delle suddette proprietà:
- “ opacità La proprietà ” definisce la trasparenza degli elementi.
- Usando i CSS ' transizione ”, modificare gradualmente i valori delle proprietà in un periodo di tempo specificato.
Produzione
Ti abbiamo insegnato i metodi per utilizzare i CSS per un effetto di dissolvenza al caricamento della pagina.
Conclusione
Diverse proprietà CSS possono essere utilizzate per applicare un effetto di dissolvenza sugli elementi HTML. Più in particolare, il “ animazione ”, “ opacità ', e ' transizione Le proprietà ” possono essere utilizzate per specificare effetti animati su pagine o elementi. Le animazioni vengono regolate utilizzando il pulsante ' @keyframe ' regole. Questo articolo ha spiegato i metodi per aggiungere un effetto di dissolvenza al caricamento della pagina utilizzando i CSS.