Quindi, tornando a quel tutorial, il prossimo passo è iniziare a lavorare sul nostro C-s us.
Quindi dobbiamo creare un nuovo file C S S e fogli di stile pubblici e chiamarlo.
Quel successo.
Quindi se torniamo qui vai nella nostra directory pubblica apri fogli di stile sembra che sia già
aperto e con un clic destro Crea nuovo file e chiamerò questo.
Blanding è sì.
Ora se lo apro è vuoto ed è pronto per essere riempito con
tutte le regole che modelleranno la nostra pagina principale.
Quindi di nuovo qui la prima cosa che vogliamo fare è aprire l'apprendimento che Danciu dice che abbiamo fatto.
E vogliamo impostare il colore di sfondo del corpo da bloccare.
Puoi scegliere qualsiasi colore che ti piace.
Penso solo che sembra bello sfumare nella prima immagine da uno sfondo nero e quindi iniziare
il crossfade da lì.
Quindi ho incollato in questa regola ciò che abbiamo fatto è stato selezionato il body tag e quindi impostato la parte posteriore
sul colore per l'hash.
0 0 0 che è lo stesso del nero.
Quindi ora ho bisogno di una posizione di tutto il contesto e per visualizzare tutti i campeggi che abbiamo selezionato viene selezionato
con un ID.
Quindi andremo avanti e useremo il selettore ID e questa è l'intestazione di Blanding.
E quello che abbiamo fatto qui è che abbiamo preso questo testo e abbiamo dato un indice z di 1.
Quindi, se non si conosce l'indice z, in pratica la pagina web può essere visualizzata su un piano tridimensionale.
Abbiamo X e Y che è sinistra e destra su e giù e poi Z che è avanti e indietro nello spazio.
Quindi se diamo un indice z di 1 Si sta avvicinando verso di noi.
di diverso da static static è il valore di posizione predefinito per tutti i suoi elementi HTML .
E questo sovrapposto a qualsiasi altro contenuto che abbia un indice az inferiore a uno in modo
che possiamo usare l'indice z dobbiamo cambiare la posizione da qualcosa
E se usi la statica, in realtà ignorerai l'indice z.
Ora quello che vogliamo fare è centrare quel testo e il pulsante.
Quindi uso solo il centro di allineamento del testo qui e questo ci porterà centrato orizzontalmente.
Ora, per permetterci di sottrarre verticalmente la pagina, in realtà ci sono molti
modi diversi per farlo, ma ho scoperto che il modo più semplice per farlo è usare l'altezza della vista.
Quindi, quello che facciamo qui è impostare il padding in alto a 40 in altezza.
Il motivo per cui non gioco a 50 è perché questo in realtà spingerebbe il contenuto verso il basso.
E sembra che sia centrato.
Quindi salveremo questa regola, torniamo qui e aggiorni e puoi vedere che lo sfondo è nero
e in basso.
Si.
Il testo non può essere centrato sulla pagina se vogliamo che possiamo aggiornare qui.
Vedi un po 'meglio.
Quindi adesso il testo del Welcome to your camp è appena visibile, quindi lo cambieremo qui in un secondo.
E sembra che prendiamo semplicemente la testa di atterraggio o Slichter aggiungiamo un selettore H1 ad esso e
cambiamo il colore in 1.
Quindi aggiungo che qui andrò a dire che aggiorna la pagina e ora è molto più facile vedere il testo.
E quando avremo lo sfondo lì sarà più facile vederlo.
Quindi la prossima cosa che vogliamo fare è stilare la lista non ordinata.
E poiché sai che la lista ha una classe di slide show, è molto facile per noi farla scorrere.
Quindi prenderò questa regola e la inseriremo qui.
poi la sposterai nell'angolo in alto a sinistra della pagina usando le posizioni di primo livello di zero.
Quindi abbiamo selezionato l'honour con la sua classe e abbiamo impostato la posizione fissata con
l'altezza al 100 percento, quindi occuperà l'intera pagina e
E poi se vedi qui abbiamo l'indice z impostato a zero.
Questo farà in modo che le immagini di sfondo siano dietro agli altri contenuti come sono benvenuti in
TUO testo nella nostra vista o nei campeggi.
Imposta il nostro stile di elenco.
E in questa guerra sposta i punti elenco in questo modo.
Non li vediamo dagli elementi della lista.
E infine vogliamo assicurarci che non ci siano margini o imbottiture.
Quindi li impostiamo entrambi a zero.
Ora salviamo, torniamo qui e siamo freschi.
Possiamo vedere che i punti elenco che erano sul lato sinistro qui sono scomparsi.
Ora abbiamo effettivamente bisogno di modificare i singoli elementi della lista.
qui copiala portala sopra Intourist SS incollala sotto la lista senza root e quello che abbiamo qui è la stessa
diapositiva a punti del selettore di classe per la lista dei voti d'onore e poi la stiamo dicendo per
selezionare ogni elemento dell'elenco all'interno dell'elenco, ancora una volta impostiamo la larghezza e l'altezza al 100 percento.
Quindi tireremo questa regola proprio
Questa volta la posizioniamo assoluta in alto e a sinistra o zero ancora la dimensione dello sfondo è impostata per coprire.
E questo è ciò che permetterà alle immagini di occupare l'intero spazio della pagina.
Abbiamo anche impostato la nostra posizione arretrata al 50 percento al 50 percento.
E questo centrerà perfettamente le immagini sulla pagina.
Quindi, per ultimo, abbiamo impostato lo sfondo senza alcuna ripetizione.
Questo in cui l'immagine non si ripete verticalmente o orizzontalmente.
a dissolversi e quindi useremo l'animazione che creeremo qui un po 'per sfumarle lentamente in una opacità di una.
Impostiamo la nostra opacità a zero perché vogliamo che le nostre immagini inizino
Impostiamo il nostro indice z a zero ancora una volta questo assicurerà che le immagini di sfondo siano posizionate
dietro il testo e il pulsante.
L'ultima proprietà che abbiamo qui è chiamata animazione e questo è qualcosa che non abbiamo visto prima.
Questo ci consentirà di sfumare le immagini in entrata e in uscita.
Quindi il nome dell'animazione è l'animazione dell'immagine e questo è arbitrario, puoi chiamarlo come
vuoi fintanto che coincide con l'animazione che creeremo qui in pochi minuti e poi
diciamo che l'animazione dura 50 secondi.
Ci assicuriamo che sia lineare e che i mezzi lineari stiano mostrando l'animazione
alla stessa velocità dall'inizio alla fine.
E infine diciamo all'animazione di loop infinitamente.
In questo modo la nostra presentazione non finisce mai.
Quindi possiamo dirlo, ma se lo visualizziamo in anteprima non verrà mostrato nulla perché non abbiamo
l'animazione impostata.
Inoltre, non abbiamo alcuna immagine impostata sulle singole voci dell'elenco.
Quindi andiamo avanti e farlo ora.
Quindi copieremo tutto l'elemento dell'elenco di diapositive nei selettori figlio e questo è ciò
che aggiungerà le immagini di sfondo agli effettivi elementi dell'elenco.
Così ora e possiamo vedere che ci sono cinque voci di lista che iniziano con quella di un bambino fino
a cinque.
Diamo a ciascuno un'immagine di sfondo del tuo ruolo e, se lo desideri, puoi collegarti a questi locali o
inserire le immagini all'interno della tua directory pubblica all'interno di una directory di immagini.
Sono andato avanti e li ho semplicemente caricati usando l'immagine o si tratta di un servizio di upload gratuito sul web.
realmente inteso per l'hosting di immagini da utilizzare sul tuo sito Web, ma è una soluzione rapida disponibile.
Non è
L'animazione per la prima immagine di sfondo inizierà immediatamente.
Quindi non dobbiamo dargli un ritardo nell'animazione.
Vogliamo che ogni immagine sbiadisca dopo 10 secondi dall'immagine precedente.
Così ho impostato il ritardo dell'animazione dell'immagine successiva su 10 secondi e quindi incrementiamo di 10 per ogni immagine successiva.
Quindi 20 secondi per il terzo 30 per il quarto e 40 per il quinto che ci
porterà fino a 50 secondi e poi ricominciamo da Immagine numero uno.
tutti i pezzi sono impostati su zero e non abbiamo l'animazione impostata per dissolverli in uno solo.
Quindi possiamo ancora andare avanti e dire l'atterraggio al file CSSA ma non vedremo ancora nulla perché
Quindi vai avanti e fallo ora.
Quindi ho intenzione di copiare la regola di animazione delle immagini dei keyframes dal tutorial e incollarla qui.
Quindi quello che stiamo facendo è prendere il selettore di frame e dare all'animazione il nome dell'animazione dell'immagine.
E questo corrisponde al precedente valore che avevamo per la proprietà di animazione nella nostra
presentazione era la regola di scorrimento.
Quindi abbiamo quello che faremo è indicare ciò che vogliamo che accada in vari fotogrammi
chiave all'interno dell'animazione.
Quindi l'animazione passa dallo zero percento fino al 100 percento, ma siamo interessati solo dallo zero
al 30 percento.
Quindi, quello che succede qui è iniziare la nostra animazione a zero per l'opacità e poi fino
al 10 percento.
Lo lasciamo sfumare nello spazio.
Quando lasciamo l'opacità a un livello fino al 20 percento e poi lo ritroviamo a zero
al 30 percento.
temporizzazione dell'animazione della proprietà impostata per facilitare da 0 a 10 e quindi tende anche a decollare.
Notate anche che abbiamo la funzione di
Quindi questo ci dà una transizione più fluida con Faden da 0 a 1.
Quindi ti starai chiedendo dove siamo arrivati ​​con queste percentuali.
Così sono andato avanti e ho creato un grafico dell'animazione per aiutarti a visualizzare meglio ciò che sta accadendo qui.
Quindi in pratica abbiamo un'immagine che si animerà da zero secondi a 10 secondi e quindi la seconda
immagine passerà da 10 a 20.
Il terzo da 20 a 30 e poi da 30 a 40 e poi da 40 a 50 che compongono cinque immagini a 10 secondi ciascuno.
all'opacità di uno e poi da 10 secondi a 15 secondi si dissolve nell'immagine successiva.
Quindi da zero secondi a 10 secondi abbiamo un Faden di cinque secondi e quindi l'immagine rimane sbiadita
Quindi questo può essere rappresentato dal blu che si sbiadisce in rosso, che è sollen e poi svanisce che è arancione.
Quindi la prima immagine passa dallo 0 al 10 percento e passa da zero a
cinque secondi e rimane solida dal 10 al 20 percento.
Quindi vedi che abbiamo dal 10 al 20 percento di pastoso e pastoso.
E poi dal 20 al 30 percento in realtà sta svanendo da uno indietro a zero.
E mentre sta accadendo la prossima immagine, chi ha già iniziato l'animazione a 10 secondi sarà da
zero a uno da 10 a 15.
E questo si sovrapporrà qui creando questo effetto di dissolvenza incrociata.
Quindi rimane solido per cinque secondi e poi abbiamo un'altra sovrapposizione mentre si attenua e l'immagine
successiva si dissolve e lo stesso modello si ripete fino a quando non arriviamo a 50 secondi, che è la fine della nostra animazione.
Questa immagine è solida
E poi torniamo all'inizio dove l'immagine originale si dissolve mentre la quinta
immagine si dissolve e poi ricomincia da capo e scorre infinitamente.
Quindi andiamo avanti e salviamo gli Stati Uniti e apriamo la webcam.
Assicurati che i tuoi server siano attivi e aggiornati e possiamo vedere l'animazione dal vivo.
Quindi questa immagine è visibile per cinque secondi e ora sta per svanire quando l'immagine successiva si affievolisce.
Quindi questa è una transizione di cinque secondi.
Riceviamo altri cinque secondi di questa foto e poi svanirà nel prossimo.
Quindi l'ultima cosa che vuoi fare è assicurarti che il nostro dispositivo di scorrimento dello sfondo funzioni su tutti i browser.
Quindi, tornando al tutorial qui e in fondo ho questa regola qui o la copio.
Riportalo nel tuo successo.
Klowns è stata aggiunta dal modernizzatore e avevamo già il CD dei modernizzatori e proprio qui se
vuoi sapere come ho scoperto che ho appena guardato il modernizzatore CDR e ho scelto il primo.
Incollalo in basso e vedi che ho questa virgola dice che i browser più vecchi supportano le animazioni CSSA non aggiunte
Quindi finisco per copiare la versione del file e poi la aggiungo a un tag di script in testa
e imposto lo script su una sincronizzazione che lo fa in modo che questo javascript venga eseguito
contemporaneamente alle altre risorse sulla pagina.
Quindi, se torniamo al CSSA, possiamo vedere che hanno solo la capacità impostata su 1.
Quindi, quello che accadrà qui è che i browser che non supportano l'integrazione dei sistemi avranno
solo una diapositiva visibile e che sarebbe lo sfondo per quell'immagine.
Questo è tutto per il dispositivo di scorrimento dell'immagine di sfondo a schermo intero.
Se hai domande come ora, vedrò il prossimo video.
Grazie.