1
00:00:04,260 --> 00:00:08,990
Quindi, tornando a quel tutorial, il prossimo passo è iniziare a lavorare sul nostro C-s us.

2
00:00:09,150 --> 00:00:13,420
Quindi dobbiamo creare un nuovo file C S S e fogli di stile pubblici e chiamarlo.

3
00:00:13,590 --> 00:00:15,280
Quel successo.

4
00:00:15,510 --> 00:00:20,860
Quindi se torniamo qui vai nella nostra directory pubblica apri fogli di stile sembra che sia già

5
00:00:20,940 --> 00:00:24,930
aperto e con un clic destro Crea nuovo file e chiamerò questo.

6
00:00:24,930 --> 00:00:26,350
Blanding è sì.

7
00:00:27,430 --> 00:00:32,120
Ora se lo apro è vuoto ed è pronto per essere riempito con

8
00:00:32,130 --> 00:00:35,530
tutte le regole che modelleranno la nostra pagina principale.

9
00:00:36,150 --> 00:00:41,450
Quindi di nuovo qui la prima cosa che vogliamo fare è aprire l'apprendimento che Danciu dice che abbiamo fatto.

10
00:00:41,590 --> 00:00:44,750
E vogliamo impostare il colore di sfondo del corpo da bloccare.

11
00:00:44,800 --> 00:00:46,120
Puoi scegliere qualsiasi colore che ti piace.

12
00:00:46,120 --> 00:00:50,860
Penso solo che sembra bello sfumare nella prima immagine da uno sfondo nero e quindi iniziare

13
00:00:50,860 --> 00:00:51,980
il crossfade da lì.

14
00:00:55,530 --> 00:01:00,300
Quindi ho incollato in questa regola ciò che abbiamo fatto è stato selezionato il body tag e quindi impostato la parte posteriore

15
00:01:00,300 --> 00:01:01,230
sul colore per l'hash.

16
00:01:01,270 --> 00:01:07,530
0 0 0 che è lo stesso del nero.

17
00:01:07,610 --> 00:01:13,010
Quindi ora ho bisogno di una posizione di tutto il contesto e per visualizzare tutti i campeggi che abbiamo selezionato viene selezionato

18
00:01:13,010 --> 00:01:13,720
con un ID.

19
00:01:13,760 --> 00:01:19,290
Quindi andremo avanti e useremo il selettore ID e questa è l'intestazione di Blanding.

20
00:01:19,870 --> 00:01:24,630
E quello che abbiamo fatto qui è che abbiamo preso questo testo e abbiamo dato un indice z di 1.

21
00:01:24,640 --> 00:01:29,700
Quindi, se non si conosce l'indice z, in pratica la pagina web può essere visualizzata su un piano tridimensionale.

22
00:01:29,860 --> 00:01:36,310
Abbiamo X e Y che è sinistra e destra su e giù e poi Z che è avanti e indietro nello spazio.

23
00:01:36,310 --> 00:01:40,120
Quindi se diamo un indice z di 1 Si sta avvicinando verso di noi.

24
00:01:40,240 --> 00:01:45,860
di diverso da static static è il valore di posizione predefinito per tutti i suoi elementi HTML .

25
00:01:45,860 --> 00:01:50,980
E questo sovrapposto a qualsiasi altro contenuto che abbia un indice az inferiore a uno in modo

26
00:01:50,980 --> 00:01:54,380
che possiamo usare l'indice z dobbiamo cambiare la posizione da qualcosa

27
00:01:54,580 --> 00:01:58,300
E se usi la statica, in realtà ignorerai l'indice z.

28
00:01:58,300 --> 00:02:01,080
Ora quello che vogliamo fare è centrare quel testo e il pulsante.

29
00:02:01,090 --> 00:02:05,440
Quindi uso solo il centro di allineamento del testo qui e questo ci porterà centrato orizzontalmente.

30
00:02:05,470 --> 00:02:09,730
Ora, per permetterci di sottrarre verticalmente la pagina, in realtà ci sono molti

31
00:02:09,730 --> 00:02:15,880
modi diversi per farlo, ma ho scoperto che il modo più semplice per farlo è usare l'altezza della vista.

32
00:02:15,910 --> 00:02:19,920
Quindi, quello che facciamo qui è impostare il padding in alto a 40 in altezza.

33
00:02:20,230 --> 00:02:24,690
Il motivo per cui non gioco a 50 è perché questo in realtà spingerebbe il contenuto verso il basso.

34
00:02:24,700 --> 00:02:26,490
E sembra che sia centrato.

35
00:02:27,010 --> 00:02:33,380
Quindi salveremo questa regola, torniamo qui e aggiorni e puoi vedere che lo sfondo è nero

36
00:02:33,930 --> 00:02:35,220
e in basso.

37
00:02:35,290 --> 00:02:35,560
Si.

38
00:02:35,580 --> 00:02:40,020
Il testo non può essere centrato sulla pagina se vogliamo che possiamo aggiornare qui.

39
00:02:40,150 --> 00:02:42,710
Vedi un po 'meglio.

40
00:02:42,720 --> 00:02:47,630
Quindi adesso il testo del Welcome to your camp è appena visibile, quindi lo cambieremo qui in un secondo.

41
00:02:49,800 --> 00:02:57,030
E sembra che prendiamo semplicemente la testa di atterraggio o Slichter aggiungiamo un selettore H1 ad esso e

42
00:02:57,030 --> 00:02:58,960
cambiamo il colore in 1.

43
00:02:59,700 --> 00:03:07,200
Quindi aggiungo che qui andrò a dire che aggiorna la pagina e ora è molto più facile vedere il testo.

44
00:03:07,270 --> 00:03:11,170
E quando avremo lo sfondo lì sarà più facile vederlo.

45
00:03:13,730 --> 00:03:17,080
Quindi la prossima cosa che vogliamo fare è stilare la lista non ordinata.

46
00:03:17,360 --> 00:03:21,370
E poiché sai che la lista ha una classe di slide show, è molto facile per noi farla scorrere.

47
00:03:21,650 --> 00:03:25,040
Quindi prenderò questa regola e la inseriremo qui.

48
00:03:25,580 --> 00:03:32,330
poi la sposterai nell'angolo in alto a sinistra della pagina usando le posizioni di primo livello di zero.

49
00:03:32,390 --> 00:03:38,060
Quindi abbiamo selezionato l'honour con la sua classe e abbiamo impostato la posizione fissata con

50
00:03:38,060 --> 00:03:41,360
l'altezza al 100 percento, quindi occuperà l'intera pagina e

51
00:03:41,690 --> 00:03:44,890
E poi se vedi qui abbiamo l'indice z impostato a zero.

52
00:03:45,000 --> 00:03:49,940
Questo farà in modo che le immagini di sfondo siano dietro agli altri contenuti come sono benvenuti in

53
00:03:49,970 --> 00:03:52,130
TUO testo nella nostra vista o nei campeggi.

54
00:03:53,910 --> 00:03:55,070
Imposta il nostro stile di elenco.

55
00:03:55,080 --> 00:03:58,240
E in questa guerra sposta i punti elenco in questo modo.

56
00:03:58,240 --> 00:04:00,340
Non li vediamo dagli elementi della lista.

57
00:04:00,340 --> 00:04:03,170
E infine vogliamo assicurarci che non ci siano margini o imbottiture.

58
00:04:03,340 --> 00:04:05,180
Quindi li impostiamo entrambi a zero.

59
00:04:05,620 --> 00:04:08,530
Ora salviamo, torniamo qui e siamo freschi.

60
00:04:08,770 --> 00:04:12,480
Possiamo vedere che i punti elenco che erano sul lato sinistro qui sono scomparsi.

61
00:04:16,660 --> 00:04:19,670
Ora abbiamo effettivamente bisogno di modificare i singoli elementi della lista.

62
00:04:19,780 --> 00:04:26,460
qui copiala portala sopra Intourist SS incollala sotto la lista senza root e quello che abbiamo qui è la stessa

63
00:04:26,470 --> 00:04:32,670
diapositiva a punti del selettore di classe per la lista dei voti d'onore e poi la stiamo dicendo per

64
00:04:33,040 --> 00:04:38,950
selezionare ogni elemento dell'elenco all'interno dell'elenco, ancora una volta impostiamo la larghezza e l'altezza al 100 percento.

65
00:04:38,950 --> 00:04:40,570
Quindi tireremo questa regola proprio

66
00:04:40,600 --> 00:04:47,470
Questa volta la posizioniamo assoluta in alto e a sinistra o zero ancora la dimensione dello sfondo è impostata per coprire.

67
00:04:47,470 --> 00:04:53,100
E questo è ciò che permetterà alle immagini di occupare l'intero spazio della pagina.

68
00:04:53,110 --> 00:04:56,240
Abbiamo anche impostato la nostra posizione arretrata al 50 percento al 50 percento.

69
00:04:56,430 --> 00:04:59,660
E questo centrerà perfettamente le immagini sulla pagina.

70
00:04:59,660 --> 00:05:02,720
Quindi, per ultimo, abbiamo impostato lo sfondo senza alcuna ripetizione.

71
00:05:03,010 --> 00:05:06,870
Questo in cui l'immagine non si ripete verticalmente o orizzontalmente.

72
00:05:07,060 --> 00:05:13,330
a dissolversi e quindi useremo l'animazione che creeremo qui un po 'per sfumarle lentamente in una opacità di una.

73
00:05:13,330 --> 00:05:17,650
Impostiamo la nostra opacità a zero perché vogliamo che le nostre immagini inizino

74
00:05:17,770 --> 00:05:22,930
Impostiamo il nostro indice z a zero ancora una volta questo assicurerà che le immagini di sfondo siano posizionate

75
00:05:23,020 --> 00:05:24,790
dietro il testo e il pulsante.

76
00:05:25,150 --> 00:05:29,540
L'ultima proprietà che abbiamo qui è chiamata animazione e questo è qualcosa che non abbiamo visto prima.

77
00:05:29,590 --> 00:05:33,430
Questo ci consentirà di sfumare le immagini in entrata e in uscita.

78
00:05:33,490 --> 00:05:38,920
Quindi il nome dell'animazione è l'animazione dell'immagine e questo è arbitrario, puoi chiamarlo come

79
00:05:38,920 --> 00:05:44,430
vuoi fintanto che coincide con l'animazione che creeremo qui in pochi minuti e poi

80
00:05:44,430 --> 00:05:46,950
diciamo che l'animazione dura 50 secondi.

81
00:05:47,130 --> 00:05:51,780
Ci assicuriamo che sia lineare e che i mezzi lineari stiano mostrando l'animazione

82
00:05:51,780 --> 00:05:54,120
alla stessa velocità dall'inizio alla fine.

83
00:05:54,150 --> 00:05:57,370
E infine diciamo all'animazione di loop infinitamente.

84
00:05:57,480 --> 00:05:59,410
In questo modo la nostra presentazione non finisce mai.

85
00:06:01,160 --> 00:06:05,810
Quindi possiamo dirlo, ma se lo visualizziamo in anteprima non verrà mostrato nulla perché non abbiamo

86
00:06:05,810 --> 00:06:06,430
l'animazione impostata.

87
00:06:06,530 --> 00:06:10,130
Inoltre, non abbiamo alcuna immagine impostata sulle singole voci dell'elenco.

88
00:06:10,130 --> 00:06:11,580
Quindi andiamo avanti e farlo ora.

89
00:06:15,890 --> 00:06:20,900
Quindi copieremo tutto l'elemento dell'elenco di diapositive nei selettori figlio e questo è ciò

90
00:06:20,900 --> 00:06:24,390
che aggiungerà le immagini di sfondo agli effettivi elementi dell'elenco.

91
00:06:30,790 --> 00:06:37,690
Così ora e possiamo vedere che ci sono cinque voci di lista che iniziano con quella di un bambino fino

92
00:06:37,690 --> 00:06:38,470
a cinque.

93
00:06:38,520 --> 00:06:44,050
Diamo a ciascuno un'immagine di sfondo del tuo ruolo e, se lo desideri, puoi collegarti a questi locali o

94
00:06:44,050 --> 00:06:48,030
inserire le immagini all'interno della tua directory pubblica all'interno di una directory di immagini.

95
00:06:48,070 --> 00:06:53,020
Sono andato avanti e li ho semplicemente caricati usando l'immagine o si tratta di un servizio di upload gratuito sul web.

96
00:06:53,200 --> 00:06:58,780
realmente inteso per l'hosting di immagini da utilizzare sul tuo sito Web, ma è una soluzione rapida disponibile.

97
00:06:58,780 --> 00:06:59,390
Non è

98
00:06:59,770 --> 00:07:02,740
L'animazione per la prima immagine di sfondo inizierà immediatamente.

99
00:07:02,830 --> 00:07:05,030
Quindi non dobbiamo dargli un ritardo nell'animazione.

100
00:07:05,110 --> 00:07:09,570
Vogliamo che ogni immagine sbiadisca dopo 10 secondi dall'immagine precedente.

101
00:07:09,580 --> 00:07:15,290
Così ho impostato il ritardo dell'animazione dell'immagine successiva su 10 secondi e quindi incrementiamo di 10 per ogni immagine successiva.

102
00:07:15,430 --> 00:07:20,590
Quindi 20 secondi per il terzo 30 per il quarto e 40 per il quinto che ci

103
00:07:20,590 --> 00:07:24,320
porterà fino a 50 secondi e poi ricominciamo da Immagine numero uno.

104
00:07:25,150 --> 00:07:30,460
tutti i pezzi sono impostati su zero e non abbiamo l'animazione impostata per dissolverli in uno solo.

105
00:07:30,460 --> 00:07:35,600
Quindi possiamo ancora andare avanti e dire l'atterraggio al file CSSA ma non vedremo ancora nulla perché

106
00:07:35,620 --> 00:07:41,330
Quindi vai avanti e fallo ora.

107
00:07:41,420 --> 00:07:48,400
Quindi ho intenzione di copiare la regola di animazione delle immagini dei keyframes dal tutorial e incollarla qui.

108
00:07:54,240 --> 00:08:01,590
Quindi quello che stiamo facendo è prendere il selettore di frame e dare all'animazione il nome dell'animazione dell'immagine.

109
00:08:01,590 --> 00:08:07,490
E questo corrisponde al precedente valore che avevamo per la proprietà di animazione nella nostra

110
00:08:07,500 --> 00:08:09,900
presentazione era la regola di scorrimento.

111
00:08:09,900 --> 00:08:16,150
Quindi abbiamo quello che faremo è indicare ciò che vogliamo che accada in vari fotogrammi

112
00:08:16,200 --> 00:08:17,700
chiave all'interno dell'animazione.

113
00:08:17,820 --> 00:08:23,520
Quindi l'animazione passa dallo zero percento fino al 100 percento, ma siamo interessati solo dallo zero

114
00:08:23,520 --> 00:08:24,800
al 30 percento.

115
00:08:25,110 --> 00:08:31,230
Quindi, quello che succede qui è iniziare la nostra animazione a zero per l'opacità e poi fino

116
00:08:31,230 --> 00:08:32,220
al 10 percento.

117
00:08:32,370 --> 00:08:34,260
Lo lasciamo sfumare nello spazio.

118
00:08:34,290 --> 00:08:41,580
Quando lasciamo l'opacità a un livello fino al 20 percento e poi lo ritroviamo a zero

119
00:08:41,580 --> 00:08:43,110
al 30 percento.

120
00:08:43,110 --> 00:08:50,040
temporizzazione dell'animazione della proprietà impostata per facilitare da 0 a 10 e quindi tende anche a decollare.

121
00:08:50,040 --> 00:08:53,100
Notate anche che abbiamo la funzione di

122
00:08:53,160 --> 00:08:58,030
Quindi questo ci dà una transizione più fluida con Faden da 0 a 1.

123
00:08:58,920 --> 00:09:02,200
Quindi ti starai chiedendo dove siamo arrivati ​​con queste percentuali.

124
00:09:02,400 --> 00:09:08,840
Così sono andato avanti e ho creato un grafico dell'animazione per aiutarti a visualizzare meglio ciò che sta accadendo qui.

125
00:09:09,840 --> 00:09:16,020
Quindi in pratica abbiamo un'immagine che si animerà da zero secondi a 10 secondi e quindi la seconda

126
00:09:16,020 --> 00:09:17,880
immagine passerà da 10 a 20.

127
00:09:17,880 --> 00:09:25,510
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.

128
00:09:25,740 --> 00:09:32,340
all'opacità di uno e poi da 10 secondi a 15 secondi si dissolve nell'immagine successiva.

129
00:09:32,340 --> 00:09:40,000
Quindi da zero secondi a 10 secondi abbiamo un Faden di cinque secondi e quindi l'immagine rimane sbiadita

130
00:09:40,260 --> 00:09:47,330
Quindi questo può essere rappresentato dal blu che si sbiadisce in rosso, che è sollen e poi svanisce che è arancione.

131
00:09:47,700 --> 00:09:54,810
Quindi la prima immagine passa dallo 0 al 10 percento e passa da zero a

132
00:09:54,810 --> 00:09:59,250
cinque secondi e rimane solida dal 10 al 20 percento.

133
00:09:59,250 --> 00:10:03,330
Quindi vedi che abbiamo dal 10 al 20 percento di pastoso e pastoso.

134
00:10:03,570 --> 00:10:08,920
E poi dal 20 al 30 percento in realtà sta svanendo da uno indietro a zero.

135
00:10:09,270 --> 00:10:16,200
E mentre sta accadendo la prossima immagine, chi ha già iniziato l'animazione a 10 secondi sarà da

136
00:10:16,290 --> 00:10:18,870
zero a uno da 10 a 15.

137
00:10:18,870 --> 00:10:22,070
E questo si sovrapporrà qui creando questo effetto di dissolvenza incrociata.

138
00:10:22,290 --> 00:10:27,510
Quindi rimane solido per cinque secondi e poi abbiamo un'altra sovrapposizione mentre si attenua e l'immagine

139
00:10:27,510 --> 00:10:34,990
successiva si dissolve e lo stesso modello si ripete fino a quando non arriviamo a 50 secondi, che è la fine della nostra animazione.

140
00:10:35,040 --> 00:10:36,630
Questa immagine è solida

141
00:10:36,840 --> 00:10:42,200
E poi torniamo all'inizio dove l'immagine originale si dissolve mentre la quinta

142
00:10:42,210 --> 00:10:47,300
immagine si dissolve e poi ricomincia da capo e scorre infinitamente.

143
00:10:47,340 --> 00:10:51,910
Quindi andiamo avanti e salviamo gli Stati Uniti e apriamo la webcam.

144
00:10:52,020 --> 00:10:56,380
Assicurati che i tuoi server siano attivi e aggiornati e possiamo vedere l'animazione dal vivo.

145
00:11:02,590 --> 00:11:07,530
Quindi questa immagine è visibile per cinque secondi e ora sta per svanire quando l'immagine successiva si affievolisce.

146
00:11:07,630 --> 00:11:09,450
Quindi questa è una transizione di cinque secondi.

147
00:11:09,550 --> 00:11:13,870
Riceviamo altri cinque secondi di questa foto e poi svanirà nel prossimo.

148
00:11:16,550 --> 00:11:22,070
Quindi l'ultima cosa che vuoi fare è assicurarti che il nostro dispositivo di scorrimento dello sfondo funzioni su tutti i browser.

149
00:11:22,190 --> 00:11:29,420
Quindi, tornando al tutorial qui e in fondo ho questa regola qui o la copio.

150
00:11:29,420 --> 00:11:31,380
Riportalo nel tuo successo.

151
00:11:31,440 --> 00:11:38,540
Klowns è stata aggiunta dal modernizzatore e avevamo già il CD dei modernizzatori e proprio qui se

152
00:11:38,540 --> 00:11:45,680
vuoi sapere come ho scoperto che ho appena guardato il modernizzatore CDR e ho scelto il primo.

153
00:11:45,680 --> 00:11:54,600
Incollalo in basso e vedi che ho questa virgola dice che i browser più vecchi supportano le animazioni CSSA non aggiunte

154
00:11:55,760 --> 00:12:02,420
Quindi finisco per copiare la versione del file e poi la aggiungo a un tag di script in testa

155
00:12:02,420 --> 00:12:08,270
e imposto lo script su una sincronizzazione che lo fa in modo che questo javascript venga eseguito

156
00:12:08,270 --> 00:12:10,510
contemporaneamente alle altre risorse sulla pagina.

157
00:12:11,420 --> 00:12:16,330
Quindi, se torniamo al CSSA, possiamo vedere che hanno solo la capacità impostata su 1.

158
00:12:16,340 --> 00:12:21,500
Quindi, quello che accadrà qui è che i browser che non supportano l'integrazione dei sistemi avranno

159
00:12:21,500 --> 00:12:25,250
solo una diapositiva visibile e che sarebbe lo sfondo per quell'immagine.

160
00:12:27,070 --> 00:12:30,390
Questo è tutto per il dispositivo di scorrimento dell'immagine di sfondo a schermo intero.

161
00:12:30,550 --> 00:12:33,640
Se hai domande come ora, vedrò il prossimo video.

162
00:12:33,640 --> 00:12:34,000
Grazie.