Transizione CSS Proprietà multiple
Esempio 1
Avvia questo codice creando prima il file HTML. Stiamo aprendo il nuovo file e quindi selezionando l'HTML come lingua nel codice Visual Studio; dobbiamo mettere il "!"All'interno del file che abbiamo creato qui. Tutti i tag di base dell'HTML compaiono in questo file. Dobbiamo solo digitare il corpo dell'HTML e il collegamento del file CSS all'interno della "testa."Qui, nel corpo, prima creiamo un'intestazione e poi un paragrafo. Dopo questo paragrafo, stiamo creando un div vuoto qui. Useremo questo codice HTML anche nei nostri prossimi esempi. Ora, ci sposteremo verso il file CSS per ulteriori codifiche. Applicheremo le proprietà di transizione su questo div nel file CSS.
Innanzitutto, abbiamo impostato il "div" e la sua "larghezza" è "100px" e "100px" per "altezza."Quindi impostare il suo" sfondo "come" viola."Il" raggio di confine "di questo div è" 50%", quindi apparirà come un cerchio. Dopo tutte queste proprietà, applicheremo la proprietà "transizione" e mettemo qui "larghezza" e "2s". Applica l'effetto di transizione sulla larghezza del div e anima per 2sec. Dopo questo, usiamo il "hover" con il "div", quindi quando ci libramo su questo div, cambierà la sua larghezza in "300px" come abbiamo selezionato "300px" come la sua "larghezza."
L'output di questo codice mostra come la proprietà di transizione cambia nella larghezza dell'elemento Div. Puoi vedere in questo video dato che la sua larghezza aumenta quando si librano il mouse su questo circolo div. Quando il mouse non è su questo elemento, tornerà nella posizione originale.
Video playerhttps: // linuxhint.com/wp-content/uploads/2022/06/Transition-Property-Profile-1-Microsoft -Edge-2022-06-12-15-45-12.MP400: 0000: 0000: 11 Up/giù tasti freccia per aumentare o ridurre il volume.Esempio n. 2
Qui, applicheremo la proprietà di transizione a larghezza e altezza. La "larghezza" del div è "120px" e "altezza" è anche la stessa "120px". Lo "sfondo" del Div è di colore "arancione" e il suo "raggio del bordo" è "30%" in questo esempio. Stiamo usando la proprietà "Transition" qui, che cambia la sua "larghezza" con una durata del tempo di "2s" e cambia la sua "altezza" con una durata del tempo di "4s". Tutte queste transizioni vengono applicate quando attiviamo il mouse su questo elemento div. Usiamo anche il "div.Hover ", in cui abbiamo impostato la" larghezza "e" altezza "dell'elemento Div dopo il broncio. Abbiamo impostato il "320px" per la "larghezza" quando ci litighiamo e il
"Altezza" di 320px ".
In questo video dato, puoi vedere l'output di questo esempio. Puoi vedere che quando ci libramo su questo elemento Div, cambia la sua larghezza e la sua altezza perché impostiamo sia la larghezza che l'altezza nella proprietà di transizione CSS.
Video playerhttps: // linuxhint.com/wp-content/uploads/2022/06/Transition-Property-Profile-1-Microsoft -Edge-2022-06-12-15-45-12.MP400: 0000: 0000: 11 Up/giù tasti freccia per aumentare o ridurre il volume.Esempio n. 3
Qui, useremo tutte le proprietà di transizione separatamente sul div. Abbiamo impostato prima la "larghezza" e "altezza", ed entrambi sono in "130px". Quindi stiamo scegliendo "rosa" come "sfondo" del div. Il suo "raggio di confine" è "20%". Ora abbiamo le proprietà di transizione qui. Innanzitutto, abbiamo impostato la "proprietà di transizione" e diamo il nome su cui viene utilizzata la transizione. Quindi, qui abbiamo impostato la "larghezza" in questa proprietà. Imposteremo il tempo in proprietà di transizione separate. Per l'impostazione del tempo di transizione, utilizziamo la proprietà della "durata della transizione" e diamo il tempo qui in questa proprietà. Impostamo "2s" per questa "Property Time-Duration."
Dopo questo, abbiamo la proprietà "Transition-Timing-Function". Questa proprietà viene utilizzata qui per specificare la velocità della transizione. Qui, lo imposta come "lineare", il che significa che la velocità dell'effetto di transizione sarà la stessa dall'inizio alla fine. Quindi, applichiamo anche un po 'di ritardo a questa transizione utilizzando la proprietà "Transition-Delay". Abbiamo impostato questo valore di proprietà come "1s". Produrrà un ritardo di "1sec" per l'effetto di transizione. Usiamo tutte le proprietà di transizione qui in questo codice separatamente. Dopo tutto questi, abbiamo impostato la "larghezza" del div quando ci litighiamo su. Dopo il mouse, cambia la sua larghezza in "350px".
L'output è mostrato qui nel video. Puoi vedere che quando si librano il mouse su questo div, impiega un ritardo di 1sec e quindi applica la transizione sulla sua larghezza e la larghezza cambia in modo lineare, il che significa a una velocità costante dall'inizio alla fine.
Video playerhttps: // linuxhint.com/wp-content/uploads/2022/06/Transition-Property-Profile-1-Microsoft -Edge-2022-06-12-15-45-12.MP400: 0000: 0000: 11 Up/giù tasti freccia per aumentare o ridurre il volume.Esempio # 4
In questo esempio, stiamo usando la proprietà abbreviata di tutte le proprietà che abbiamo usato nel nostro precedente esempio 3 in questo tutorial. La "larghezza" e "altezza" sono impostate qui come "150px" per ciascuno e lo "sfondo" è "rosa."Quindi stiamo usando la proprietà stenorta della transizione in cui specifichiamo la" proprietà di transizione "," durata di transizione "," funzione di transizione e "delay di transizione" in una proprietà "transizione". Qui, la "larghezza" specifica che la transizione viene applicata sulla "larghezza" del div e la durata della transizione è "2s" e nella funzione di temporizzazione "lineare" della transizione e un ritardo di 1 sec nella transizione. Tutte queste proprietà sono definite qui in una proprietà. Quindi, si chiama anche proprietà stenografica della transizione. Abbiamo anche impostato la "larghezza" di questo div dopo esserci il mouse sul topo.
Il video di output mostra che quando spostiamo il mouse su questo, impiega un ritardo di 1 secondo prima di applicare la transizione alla sua larghezza, il che cambia linearmente dall'inizio alla fine.
Video playerhttps: // linuxhint.com/wp-content/uploads/2022/06/Transition-Property-Profile-1-Microsoft -Edge-2022-06-12-15-45-12.MP400: 0000: 0000: 11 Up/giù tasti freccia per aumentare o ridurre il volume.Esempio # 5
Stiamo creando più elementi DIV qui con nomi diversi e applicheremo diverse proprietà di funzionamento della transizione a tutti questi. Creiamo cinque diversi elementi Div qui in questo codice.
La "larghezza" e "altezza" di tutti gli elementi div sono "100px" per ciascuno. Applichiamo la "transizione" sulla "larghezza" nella durata del tempo di "2s". Allineiamo anche il testo che è scritto all'interno del Div in "Center" utilizzando la proprietà "allineate al testo" e impostando "grassetto" per questo "weight di carattere."Quindi, menzioneremo il primo Div con l'aiuto del nome del div e useremo la proprietà" Transition-Timing-Function "per questo div e impostare" lineare "per questo div. Quindi, mostra la stessa velocità dall'inizio alla fine. Lo "sfondo" di "div1" è "rosso."
Per il secondo div, "Div2", stiamo usando "facilità" per la "funzione di transizione."Questa" facilità "inizierà la transizione lentamente, quindi veloce, e termina lentamente. Lo "sfondo" di "div2" è "verde."Per il terzo Div," Div3 ", utilizziamo uno sfondo" blu "e stiamo impostando" facilità in "come valore della" funzione di tempesta di transizione."La" facilità-in "viene utilizzata per fare in modo che l'effetto di transizione inizi lentamente. Il quarto Div ha uno "sfondo" giallo "e" facilitare "per questa proprietà. La transizione "facilitata" termina lentamente. L'ultimo Div utilizza "facilità in out" in "Funzione di transizione" e inizierà e finirà lentamente. Inoltre, lo "sfondo" dell'ultimo div è "marrone."
Nel video, abbiamo cinque diversi elementi DIV con diversa "funzione di intaglio di transizione" e puoi notare in questo video che i tempi della transizione di tutti gli elementi Div sono diversi.
Video playerhttps: // linuxhint.com/wp-content/uploads/2022/06/Transition-Property-Profile-1-Microsoft -Edge-2022-06-12-15-45-12.MP400: 0000: 0000: 11 Up/giù tasti freccia per aumentare o ridurre il volume.Conclusione
Abbiamo fornito questo tutorial spiegando il concetto di proprietà di transizione in CSS. Abbiamo trattato questo argomento in dettaglio in questo tutorial. Abbiamo spiegato separatamente la proprietà di transizione, la durata di transizione, la funzione di transizione e le proprietà di transizione-delay. Abbiamo superato cinque diversi esempi e fornito le uscite video in modo da controllare come funziona questa proprietà. Spero che tu capisca le molteplici proprietà di transizione in CSS e lo farai da solo.