Ciao a tutti, bentornati.
In passato, abbiamo fatto codice insieme segmenti, dove ho codificato,
tu hai codificato insieme a me, e abbiamo fatto molti piccoli errori insieme.
Oggi, voglio davvero fare una revisione del codice invece.
Voglio che tu ti sieda e guardi un po' del codice che ho scritto e
veda come le piccole cose che abbiamo imparato
si sommano insieme per creare pagine web più complesse.
Quindi iniziamo con un po 'di HTML.
Qui, ho un codice che sta per creare un sacco di div diversi.
L' unica cosa che potrebbe essere nuova che non hai visto prima è questa idea di
indice di tabulazione.
Quello che fa l'indice della scheda è che consente al browser di sapere che se qualcuno sta
tabulando la tua pagina,
in realtà vuoi mettere diversi elementi a fuoco in un ordine diverso.
Quindi, in questo caso, la prima cosa sarebbe A, e poi C, e poi B, ecc
È solo un altro livello di accessibilità che volevo
presentarti nel nostro codice.
L' unica altra cosa che volevo che tu sapessi in questo HTML è che l'ultimo div
ha una classe animata al suo interno.
Ho reso questo un po 'diverso in modo da poter guardare le transizioni e le
trasformazioni in azione.
Quindi, andiamo avanti e guardiamo il CSS e giochiamo con il browser.
Ora, quando iniziamo dalla parte superiore, puoi vedere che ho appena composto il div in modo
che siano piccole scatole dove puoi vedere il contenuto, e
non è tutto troppo schiacciato insieme.
L' unica cosa che potresti non aver ancora usato
te stesso nel tuo codice è questa idea di transizione di due secondi di facilità.
Questo sta per far sapere al browser che quando cambiamo stati,
vogliamo prendere circa due secondi e facilitarlo in.
Ma prima, diamo un'occhiata alla messa a fuoco.
Nel mio focus, dico cambiare il colore di sfondo.
Quindi ora, quando vado al mio browser,
inizierò a tabulare i diversi elementi.
E quando lo faccio, puoi vedere che si illuminano tutti.
Aggiornerò la pagina, perché quello che mi aspettavo di andare per primo no.
Perche' avevo fatto il tabulatore prima ancora di iniziare a scrivere.
Allora, eccoci qui.
A cambia colore, e poi C, e poi B.
Questo è che si dà all'utente il potere di saltare alle sezioni più importanti prima.
Ok, allora dopo l'attenzione, parliamo di hover.
Ora, quando passa il mouse, quello che sto dicendo è rendere la larghezza di 200 pixel,
era 100, e cambiare il colore di sfondo.
Quindi diamo un'occhiata.
Mettero' in evidenza sopra C proprio qui, poi B, e poi A.
E vedete che e' una transizione molto bella e fluida.
Ma una delle cose che voglio che tu noti è che quando non sto aleggiando su
nulla, in realtà abbiamo da A a F sulla linea superiore e
poi G attraverso I sul fondo.
Quando inizi ad andare un po 'troppo pazzo cambiando
dinamicamente le dimensioni delle cose, puoi buttare tutto fuori posizione.
Quindi assicurati di usarlo con parsimonia.
Va bene, andiamo a quello fresco, l'ultimo.
Se ricordi, ho creato un div e l'
ho impostato per essere animato perché ho usato la classe animate.
In questo momento, l'unica differenza è che il colore di sfondo è un po 'verde,
ma voglio mostrarti cosa succede quando ci passo sopra.
Quando lo faro', daro' il via a una trasformazione in cui diro' di
ruotare a 360 gradi.
E inoltre, invece di avere un'opacità di 0,4, il che significa un po 'sfocare
fuori, cancellarlo un po ', impostarlo sul colore pieno.
Ci siamo.
Penso che sia una figata.
L' abbiamo ruotata.
Quando usciamo dal passaggio del mouse, ruota indietro.
Queste sono le cose divertenti che puoi aggiungere alla tua pagina
quando stai imparando come codificare che ti danno davvero questo senso di,
hey, lo sto facendo, sto facendo cambiare le cose.
Quindi quello che ti incoraggerei davvero a fare ora è tornare indietro, rivedere la lezione di transizione,
rivedere la lezione di trasformazione, assicurarsi e vedere se questi concetti
ora hanno un po 'più senso di aver visto il codice in azione.
E spero che giocherai con questo codice, cambierai i valori e ti
divertirai davvero un po '.
Quindi buona fortuna.