Come transizione CSS Display + Proprietà opaci

In CSS, la transizione si riferisce a un metodo per controllare la velocità dell'elemento aggiunto mentre si applica le proprietà CSS su di esso. Più specificamente, è possibile eseguire varie transizioni, tra cui transizioni di pagina, transizioni di immagini, testo e molti altri. È possibile specificare le modifiche da applicare dopo un periodo di tempo specifico, invece di avere le modifiche alla proprietà hanno effetto immediatamente.

Questo post spiega il metodo per impostare la transizione con l'aiuto di CSS "Schermo" E "opacità" Proprietà.

Come transizione proprietà CSS "display" e "opacità"?

Alla transizione CSS "Schermo" E "opacità"Proprietà, in primo luogo, crea un contenitore div con il""Elemento. Quindi, accedi al contenitore Div e aggiungi un'immagine di sfondo con l'aiuto di "immagine di sfondo" proprietà. Dopodiché, imposta il “transizione","opacità"E altre proprietà richieste secondo la tua scelta.

Passaggio 1: crea un contenitore "div"

Inizialmente, crea un contenitore div con l'aiuto di ""Container e aggiungi un attributo di classe con un nome particolare. Per fare ciò, abbiamo impostato il nome della classe come "articolo":

Passaggio 2: impostare la proprietà "Visualizza"

Successivamente, accedi al contenitore Div utilizzando il nome della classe "principale”E imposta il"Schermo" proprietà:

.Main-elem
blocco di visualizzazione;

Qui, il valore del "SchermoLa proprietà "è impostata come"bloccare"Per assumere tutta la larghezza dello schermo.

Passaggio 3: aggiungi l'immagine di sfondo

Successivamente, applica le seguenti proprietà CSS sul contenitore Div Accesso:

.Main-elem
Altezza: 400px;
larghezza: 400px;
Immagina di background: URL (Flowers primaverile.jpg);
opacità: 0.1;
Transizione: opacità 2s facilità in out;
Margine: 30px 50px;

Nel frammento di codice sopra indicato:

• "altezza" E "larghezza"Le proprietà determinano la dimensione dell'elemento definito.
• "immagine di sfondo"La proprietà CSS viene utilizzata per inserire un'immagine con l'aiuto di"url ()"Funzione sul retro dell'elemento.
• "opacità"Determina il livello di opacità per un elemento. Il livello di opacità dimostra il livello di trasparenza, dove "1"È usato per nessuna trasparenza e"0.5" è per "50%"Trasparenza.
• "transizione"In CSS consente agli utenti di modificare i valori delle proprietà senza problemi per una determinata durata.
• "margine"Definisce lo spazio al di fuori del limite definito attorno a un elemento.

Produzione

Passaggio 4: Applica ": Hover" Pseudo Selector

Ora, accedi al contenitore Div lungo il ": Hover"Pseudo Selettore utilizzato per selezionare elementi quando si librano il mouse su di loro:

.Main-Etim: Hover
opacità: 1;

Quindi, imposta il "opacità"Dell'elemento selezionato come"1"Per rimuovere la trasparenza.

Produzione

Si tratta di impostare le proprietà di transizione CSS "display" e "opacità".

Conclusione

Per impostare le proprietà di transizione "display" e "opacity", prima, crea un contenitore di div usando l'elemento. Successivamente, accedi all'elemento Div e imposta "Schermo" COME "bloccare". Successivamente, applica le altre proprietà CSS, tra cui "immagine di sfondo"Per inserire un'immagine nel contenitore," transizione "," opacità "e altri. Questo post ha spiegato il metodo per impostare la transizione con CSS "Schermo" E "opacità" proprietà.