Utilizzando CSS per un effetto dissolvenza sul carico di pagina

CSS ci consente di aggiungere varie proprietà di styling, come colore, bordo, carattere e allineamento del testo agli elementi HTML. Queste proprietà di stile forniscono un aspetto attraente all'applicazione. Inoltre, ci sono molte altre proprietà CSS che ci aiutano ad aggiungere alcuni effetti di animazione agli elementi. L'uso delle animazioni può anche aumentare il coinvolgimento degli utenti sulle pagine Web.

Questo articolo fornirà:

• Metodo 1: Effetto di dissolvenza usando la proprietà dell'animazione CSS
• Metodo 2: Effetto di dissolvenza usando la proprietà di transizione CSS

Metodo 1: effetto dissolvenza usando la proprietà "animazione" CSS

Per progettare una semplice pagina HTML, aggiungi il seguente elemento su di essa:

• Aggiungi il "

  "Elemento insieme al"stile"Attributo. L'attributo "stile" contiene le proprietà di stile dell'elemento.

• Applicare il "colore"Proprietà nell'attributo di stile per definire il colore del testo dell'elemento.
• Dopodiché, usa il “

  "Elemento per aggiungere un po 'di testo o un semplice paragrafo.

Di seguito è riportato il codice HTML:

Sito di tutorial di Linuxhint

Fade-in Effect sul caricamento della pagina

La pagina HTML è creata correttamente:

Nella sezione CSS, per applicare l'effetto di dissolvenza sulla pagina, il "animazione"La proprietà CSS verrà utilizzata su""Elemento della pagina HTML.

Elemento "corpo" di stile

corpo
Animazione: FadeInPage Ease 3S;
animazione-iterazione-conte: 1;

Il "" viene applicato con le seguenti proprietà CSS:

• "animazione"È la proprietà stenografia che imposta l'animazione specificando più valori. Qui, sono definiti il ​​nome di animazione, la funzione di animazione e la durata dell'animazione.
• "animazione-iterazione-conteggio"Definisce quante volte l'animazione dovrebbe iterare.

Applica le regole "@KeyFrames" su "Animazione"

@KeyFrames FadeInpage
0%
opacità: 0;

100%
opacità: 1;

Per definire il "@KeyFrames"Regole per l'animazione, menziona il nome dell'animazione dopo la parola chiave @KeyFrames. Modifica il comportamento di animazione come segue:

• A "0%"Animazione, il"opacità"Alla proprietà viene assegnato il valore 0. Significa quando l'animazione inizia, l'immagine è trasparente.
• A "100%"Animazione, l'opacità è impostata su"1", Che si riferisce a un colore solido.

Produzione

Andiamo avanti verso il secondo metodo per applicare l'effetto Fade-In sul caricamento della pagina.

Metodo 2: Effetto di dissolvenza usando la proprietà "Transizione" CSS

Aggiungi un "Onload"Attributo all'interno del""Elemento. Questo evento è attivato nel caricamento della pagina. Al carico, l'opacità dell'elemento corporeo è impostata su "1", Che si riferisce a un colore solido:

In questo esempio, il CSS "transizione"La proprietà viene utilizzata per aggiungere un effetto di dissolvenza:

corpo
opacità: 0;
transizione: opacità 6s;

Di seguito è riportata la spiegazione delle proprietà sopra dichiarate:

• "opacità"La proprietà definisce la trasparenza degli elementi.
• Usando CSS "transizione", Modifica gradualmente i valori delle proprietà per un tempo specificato.

Produzione

Ti abbiamo insegnato i metodi per l'utilizzo di CSS per un effetto di dissolvenza sul carico di pagina.

Conclusione

Diverse proprietà CSS possono essere utilizzate per applicare un effetto di dissolvenza sugli elementi HTML. Più specificamente, il "animazione","opacità", E "transizione"Le proprietà possono essere utilizzate per specificare effetti animati su pagine o elementi. Le animazioni sono regolate usando il "@KeyFrame" regole. Questo articolo ha spiegato i metodi per aggiungere un effetto di dissolvenza sul carico di pagina usando CSS.