Transizione CSS3 - Effetto di dissolvenza

Il foglio di stile a cascata fornisce molte proprietà di styling per gli elementi HTML. Queste proprietà includono uno stile semplice per l'animazione. Inoltre, gli effetti di dissolvenza e dissolvenza sono tra i comuni. Il CSS "transizione"Proprietà e"animazione"Con le regole @KeyFrame aiuta ad applicare l'animazione agli elementi HTML.

Questo articolo illustrerà il metodo per aggiungere effetti di dissolvenza su diversi elementi HTML.

Come aggiungere un effetto dissolvenza al testo?

IL "animazione"La proprietà può essere utilizzata per aggiungere un effetto di dissolvenza al testo. Per fare ciò, prima, nel file HTML, aggiungi un elemento "" e assegnalo "Fadeout-text" id:

Linuxint

Stile "#fadeout-text" ID

IL "#Fadeout-text"Viene utilizzato per accedere all'ID creato con ID"Fadeout-text"E applica le seguenti proprietà:

#fadeout-text
larghezza: 100%;
Colore: scuro;
Font-size: 6em;
Testo-align: centro;
Font-Family: Fantasy;
spaziatura del carattere: .2em;
Animazione: Fadeout 5S;

Qui:

• "larghezza"Determina la larghezza dell'elemento div.
• "colore"Definisce il testo del testo o del carattere dell'elemento.
• "dimensione del font"Specifica la dimensione del carattere.
• "allineamento"Determina l'allineamento del testo.
• "famiglia di font"Determina lo stile del carattere.
• "spaziatura del carattere"Imposta la spaziatura tra i personaggi.
• "animazione"La proprietà imposta il nome di animazione"dissolvenza"E la durata"5s"Come cinque secondi.

Definire la regola "@KeyFrames" alla proprietà

Per applicare il comportamento di animazione sull'elemento, menziona il "animazione"Nome dopo il"@KeyFrame"Parola chiave come segue:

@KeyFrames Fadeout
0%
opacità: 1;

100%
opacità: 0;

Di seguito è riportata la spiegazione dello snippet di codice sopra:

• "0%"Definisce l'inizio di un'animazione.
• "100%"Definisce la fine di un'animazione.
• "opacità"La proprietà viene utilizzata per regolare il livello di trasparenza di un elemento.

Produzione

Come aggiungere un effetto dissolvenza sul mouse?

In HTML, è anche possibile applicare l'effetto di dissolvenza quando l'utente libra il mouse sull'elemento.

Esempio

L'esempio seguente istruisce come applicare un effetto dissolvenza sul mouse.

Stile "Fadeout-text" ID

In primo luogo, specificare il “opacità" COME "100%"Oltre alle altre proprietà in stile:

opacità: 100%;

Aggiungi pseudo-selettore "Hover"

#fadeout-text: hover
opacità: 10%;
transizione: 3s;

IL "#fadeout-text: hover"Viene utilizzato per applicare le proprietà specificate sull'elemento su Hover. Qui, il "transizione"La proprietà cambia il movimento dell'elemento nella durata.

Produzione

Come aggiungere un effetto dissolvenza alle immagini?

L'aggiunta di effetti di animazione sulle immagini è una delle funzionalità più divertenti dell'applicazione Web. Con l'aiuto del concetto precedentemente discusso, puoi anche svanire l'immagine su una pagina web.

Esempio

Aggiungere un ""Elemento e assegnarlo l'ID"Fadeout-immagine":

Stile "Fadeout-Image" ID

IL "#Fadeout-Image"Viene utilizzato per accedere all'ID" Fadeout-Image "di HTML e applicare le seguenti proprietà:

#fadeout-image
larghezza: 100%;
Altezza: 50%;
Immagina di sfondo: URL (/Images/Night-.jpg);
Ripeat background: no-ripetizione;
Size di sfondo: copertina;
Posizione: assoluto;
Animazione: Fadeout 5S;

Nel codice sopra:

• "immagine di sfondo"Definisce l'URL dell'immagine.
• "Ripeat di sfondo"Definisce non ripetere l'immagine.
• "Size di sfondo"Specifica la dimensione dell'immagine di sfondo.
• "posizione"Proprietà come"assoluto"Imposta la posizione dell'immagine rilevante per l'antenato posizionato più vicino.

Aggiungi le regole "@KeyFrame" alla proprietà "Animazione"

Allo stesso modo, utilizzeremo il "@KeyFrames"Regole per applicare l'effetto Fade-Out per creare un effetto di animazione:

@KeyFrames Fadeout
0%
opacità: 1;

100%
opacità: 0;

Produzione

Si trattava di aggiungere un effetto di dissolvenza sugli elementi HTML usando CSS.

Conclusione

Proprietà CSS come "opacità","animazione","transizione", E "@KeyFrame"Le regole sono significative per aggiungere un effetto di dissolvenza sugli elementi HTML. La "opacità" imposta il livello di trasparenza, la proprietà "transizione" regola il movimento graduale dell'animazione e la proprietà "animazione", insieme alla regola "@keyframe", aiuta ad aggiungere animazione agli elementi. Questo post ha spiegato la procedura su come aggiungere un effetto di dissolvenza sugli elementi usando CSS.