1
00:00:04,260 --> 00:00:08,990
Volviendo a ese tutorial, el siguiente paso es comenzar a trabajar en nuestro C-s.

2
00:00:09,150 --> 00:00:13,420
Entonces, necesitamos crear un nuevo archivo C S S y hojas de estilo públicas y llamarlo.

3
00:00:13,590 --> 00:00:15,280
Ese exito

4
00:00:15,510 --> 00:00:20,860
Entonces, si volvemos aquí, vaya a nuestro directorio público, abra hojas de estilos, parece que ya está

5
00:00:20,940 --> 00:00:24,930
abierto y con un clic derecho, cree un archivo nuevo y lo llamaré.

6
00:00:24,930 --> 00:00:26,350
Blanding es sí.

7
00:00:27,430 --> 00:00:32,120
Ahora, si lo abro, está en blanco y está listo para rellenarlo con

8
00:00:32,130 --> 00:00:35,530
todas las reglas que darán estilo a nuestra página principal.

9
00:00:36,150 --> 00:00:41,450
Así que aquí lo primero que queremos hacer es aprender abiertamente Danciu dice que hemos hecho.

10
00:00:41,590 --> 00:00:44,750
Y queremos establecer el color de fondo de los cuerpos para bloquear.

11
00:00:44,800 --> 00:00:46,120
Puede elegir cualquier color que desee.

12
00:00:46,120 --> 00:00:50,860
Simplemente creo que se ve bien desvanecerse en la primera imagen de un fondo negro y luego comenzar el

13
00:00:50,860 --> 00:00:51,980
fundido cruzado desde allí.

14
00:00:55,530 --> 00:01:00,300
Así que he pegado esta regla, lo que hemos hecho es seleccionar la etiqueta del cuerpo y luego establecer el color

15
00:01:00,300 --> 00:01:01,230
de nuevo en hash.

16
00:01:01,270 --> 00:01:07,530
0 0 0 que es lo mismo que negro.

17
00:01:07,610 --> 00:01:13,010
Entonces ahora necesito una posición de todo el contexto y para ver todos los campamentos uno que tenemos se selecciona

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

19
00:01:13,760 --> 00:01:19,290
Así que vamos a seguir adelante y usar el selector de IDs y ese es el encabezado del tablero de Blanding.

20
00:01:19,870 --> 00:01:24,630
Y lo que hemos hecho aquí es que hemos tomado este texto y le hemos dado un índice z de 1.

21
00:01:24,640 --> 00:01:29,700
Entonces, si no conoce el índice z, básicamente, la página web se puede ver en un plano tridimensional.

22
00:01:29,860 --> 00:01:36,310
Tenemos X e Y que es hacia la izquierda y hacia la derecha hacia arriba y hacia abajo y luego Z que está hacia adelante y hacia atrás en el espacio.

23
00:01:36,310 --> 00:01:40,120
Entonces, si le damos un índice z de 1, se acerca hacia nosotros.

24
00:01:40,240 --> 00:01:45,860
de algo que no sea estático estático es el valor de posición predeterminado para todos sus elementos HTML .

25
00:01:45,860 --> 00:01:50,980
Y eso superó a cualquier otro contenido que tenga un índice z más pequeño que uno para

26
00:01:50,980 --> 00:01:54,380
que podamos usar el índice z tenemos que cambiar la posición

27
00:01:54,580 --> 00:01:58,300
Y si usa estática, en realidad ignorará el índice z.

28
00:01:58,300 --> 00:02:01,080
Ahora lo que queremos hacer es centrar ese texto y el botón.

29
00:02:01,090 --> 00:02:05,440
Así que solo uso el texto alinear el centro aquí y eso nos hará centrados horizontalmente.

30
00:02:05,470 --> 00:02:09,730
Ahora, para que podamos restar verticalmente en la página, en realidad hay muchas maneras

31
00:02:09,730 --> 00:02:15,880
diferentes de hacerlo, pero he descubierto que la manera más fácil de hacerlo es usar la altura de la vista.

32
00:02:15,910 --> 00:02:19,920
Entonces, lo que hacemos aquí es configurar el relleno superior a 40 de altura.

33
00:02:20,230 --> 00:02:24,690
La razón por la que no juego en 50 es porque eso realmente empujaría el contenido hacia abajo.

34
00:02:24,700 --> 00:02:26,490
Y parece que está centrado.

35
00:02:27,010 --> 00:02:33,380
Así que vamos a guardar esta regla, vuelve a actualizar aquí y puedes ver que el fondo es

36
00:02:33,930 --> 00:02:35,220
negro y el inferior.

37
00:02:35,290 --> 00:02:35,560
Sí.

38
00:02:35,580 --> 00:02:40,020
El texto no se puede centrar en la página si queremos que podamos actualizarlo aquí.

39
00:02:40,150 --> 00:02:42,710
Ve un poco mejor.

40
00:02:42,720 --> 00:02:47,630
Entonces, en este momento, el texto de Bienvenida a su campamento apenas se ve, así que lo cambiaremos aquí en un segundo.

41
00:02:49,800 --> 00:02:57,030
Y parece que simplemente tomamos el cabezal de aterrizaje o Slichter, le agregamos un selector H1 y

42
00:02:57,030 --> 00:02:58,960
cambiamos el color a 1.

43
00:02:59,700 --> 00:03:07,200
Así que agrega que aquí iré y deciré que actualices la página y ahora es mucho más fácil ver el texto.

44
00:03:07,270 --> 00:03:11,170
Y cuando tengamos el fondo allí, será más fácil verlo también.

45
00:03:13,730 --> 00:03:17,080
Entonces, lo siguiente que queremos hacer es diseñar la lista desordenada.

46
00:03:17,360 --> 00:03:21,370
Y como sabe que la lista tiene una clase de presentación de diapositivas, es muy fácil para nosotros deslizarla.

47
00:03:21,650 --> 00:03:25,040
Así que tomaré esta regla y la haremos aquí.

48
00:03:25,580 --> 00:03:32,330
página y luego empujemos hacia arriba en la esquina superior izquierda de la página usando posiciones de nivel superior de cero.

49
00:03:32,390 --> 00:03:38,060
Así que hemos seleccionado el honorless con su clase y establecemos la posición fijada dentro de la

50
00:03:38,060 --> 00:03:41,360
altura al 100 por ciento para que ocupe toda la

51
00:03:41,690 --> 00:03:44,890
Y luego, si ven aquí, tenemos el índice z establecido en cero.

52
00:03:45,000 --> 00:03:49,940
Esto asegurará que las imágenes de fondo estén detrás del otro contenido, como son bienvenidas a TU

53
00:03:49,970 --> 00:03:52,130
can texto en nuestra vista o campings.

54
00:03:53,910 --> 00:03:55,070
Establece nuestro estilo de lista.

55
00:03:55,080 --> 00:03:58,240
Y en este movimiento de guerra, la bala señala de esa manera.

56
00:03:58,240 --> 00:04:00,340
No los estamos viendo de los elementos de la lista.

57
00:04:00,340 --> 00:04:03,170
Y, por último, queremos asegurarnos de que no haya margen o relleno.

58
00:04:03,340 --> 00:04:05,180
Entonces ponemos esos dos a cero.

59
00:04:05,620 --> 00:04:08,530
Ahora salvamos volvemos aquí y estábamos frescos.

60
00:04:08,770 --> 00:04:12,480
Podemos ver que las viñetas que estaban en el lado izquierdo aquí han desaparecido.

61
00:04:16,660 --> 00:04:19,670
Ahora realmente necesitamos diseñar los elementos de la lista individual.

62
00:04:19,780 --> 00:04:26,460
regla aquí copiarla traerla a través de Intourist the SS pegarla debajo de la lista no rooteada y lo que tenemos aquí son las

63
00:04:26,470 --> 00:04:32,670
mismas diapositivas de puntos del selector de clase para la lista de listas de honor y luego lo contamos para seleccionar cada

64
00:04:33,040 --> 00:04:38,950
elemento de la lista dentro de la lista, una vez más establecemos el ancho y la altura al 100 por ciento.

65
00:04:38,950 --> 00:04:40,570
Así que vamos a sacar esta

66
00:04:40,600 --> 00:04:47,470
Esta vez lo colocamos en la parte superior absoluta e izquierda o cero nuevamente el tamaño de fondo está configurado para cubrir.

67
00:04:47,470 --> 00:04:53,100
Y esto es lo que permitirá que las imágenes ocupen todo el espacio de la página.

68
00:04:53,110 --> 00:04:56,240
También establecemos nuestra posición de respaldo al 50 por ciento 50 por ciento.

69
00:04:56,430 --> 00:04:59,660
Y esto centrará las imágenes perfectamente en la página.

70
00:04:59,660 --> 00:05:02,720
Entonces, por último, establecemos el fondo feliz de no repetir.

71
00:05:03,010 --> 00:05:06,870
Aquí donde la imagen no se repite vertical u horizontalmente.

72
00:05:07,060 --> 00:05:13,330
y luego usaremos la animación que vamos a crear aquí un poco para desvanecerlas lentamente en una opacidad de una.

73
00:05:13,330 --> 00:05:17,650
Establecemos nuestra opacidad a cero porque queremos que nuestras imágenes comiencen a desvanecerse

74
00:05:17,770 --> 00:05:22,930
Ajustamos nuestro índice z a cero una vez más, esto asegurará que las imágenes de fondo se coloquen

75
00:05:23,020 --> 00:05:24,790
detrás del texto y el botón.

76
00:05:25,150 --> 00:05:29,540
La última propiedad que tenemos aquí se llama animación y esto es algo que no hemos visto antes.

77
00:05:29,590 --> 00:05:33,430
Así que esto nos va a permitir realmente fundir las imágenes dentro y fuera.

78
00:05:33,490 --> 00:05:38,920
Entonces, el nombre de la animación es animación de imagen y esto es arbitrario, puedes llamarlo como quieras

79
00:05:38,920 --> 00:05:44,430
siempre que coincida con la animación que vamos a crear aquí en un minuto y luego le decimos

80
00:05:44,430 --> 00:05:46,950
a la animación que dure por 50 segundos.

81
00:05:47,130 --> 00:05:51,780
Nos aseguramos de que sea lineal y de que lo lineal significa que solo muestra que la

82
00:05:51,780 --> 00:05:54,120
animación tiene la misma velocidad de principio a fin.

83
00:05:54,150 --> 00:05:57,370
Y finalmente le decimos a la animación que bucle infinitamente.

84
00:05:57,480 --> 00:05:59,410
De esa forma, nuestra presentación de diapositivas nunca termina.

85
00:06:01,160 --> 00:06:05,810
Así que podemos decir esto, pero si lo previsualizamos, nada se va a mostrar todavía porque no tenemos configurada

86
00:06:05,810 --> 00:06:06,430
la animación.

87
00:06:06,530 --> 00:06:10,130
Tampoco tenemos imágenes configuradas para los elementos de la lista individual.

88
00:06:10,130 --> 00:06:11,580
Entonces sigamos y hagamos eso ahora.

89
00:06:15,890 --> 00:06:20,900
Así que vamos a copiar todo el elemento de la lista de diapositivas en los selectores secundarios y esto es lo

90
00:06:20,900 --> 00:06:24,390
que va a agregar las imágenes de fondo a los elementos de la lista real.

91
00:06:30,790 --> 00:06:37,690
Así que ahora y podemos ver que hay cinco elementos de la lista comenzando con el niño uno que va desde el cinco

92
00:06:37,690 --> 00:06:38,470
hasta el final.

93
00:06:38,520 --> 00:06:44,050
Le damos a cada uno una imagen de fondo de su rol y si lo desea puede vincular a estos locales o

94
00:06:44,050 --> 00:06:48,030
puede poner las imágenes dentro de su directorio público dentro de un directorio de imágenes.

95
00:06:48,070 --> 00:06:53,020
He seguido adelante y simplemente los cargo usando imágenes o este es un servicio de carga gratuito en la web.

96
00:06:53,200 --> 00:06:58,780
no está destinado a alojar imágenes para usar en su sitio web, pero es una solución rápida para usarlo.

97
00:06:58,780 --> 00:06:59,390
En realidad,

98
00:06:59,770 --> 00:07:02,740
La animación de la primera imagen de fondo comenzará inmediatamente.

99
00:07:02,830 --> 00:07:05,030
Entonces no tenemos que darle un retraso de animación.

100
00:07:05,110 --> 00:07:09,570
Queremos que cada imagen se desvanezca después de 10 segundos de la imagen anterior.

101
00:07:09,580 --> 00:07:15,290
Así que configuro la próxima demora de la animación de la imagen en 10 segundos y luego aumentamos en 10 para cada imagen posterior.

102
00:07:15,430 --> 00:07:20,590
Así que 20 segundos para el tercero 30 para el cuarto y 40 para el quinto que nos llevará

103
00:07:20,590 --> 00:07:24,320
hasta 50 segundos y luego comenzar de nuevo en la Imagen número uno.

104
00:07:25,150 --> 00:07:30,460
nada todavía porque todas las piezas están puestas a cero y no tenemos la animación configurada para fundirlas en una.

105
00:07:30,460 --> 00:07:35,600
Así que de nuevo podemos continuar y decir el aterrizaje en el archivo CSSA, pero no vamos a ver

106
00:07:35,620 --> 00:07:41,330
Así que adelante y hazlo ahora.

107
00:07:41,420 --> 00:07:48,400
Así que voy a copiar la regla de animación de imágenes de fotogramas clave del tutorial y pegarla aquí.

108
00:07:54,240 --> 00:08:01,590
Entonces, lo que estamos haciendo es tomar el selector de fotograma en el cuadro y darle a la animación el nombre de animación de imagen.

109
00:08:01,590 --> 00:08:07,490
Y esto coincide con el valor anterior que teníamos para la propiedad de animación en nuestra presentación

110
00:08:07,500 --> 00:08:09,900
de diapositivas era la regla de cálculo.

111
00:08:09,900 --> 00:08:16,150
Así que tenemos eso en su lugar, lo que haremos es indicar lo que queremos que suceda en varios fotogramas

112
00:08:16,200 --> 00:08:17,700
clave dentro de la animación.

113
00:08:17,820 --> 00:08:23,520
Entonces la animación va del cero por ciento hasta el 100 por ciento, pero solo nos preocupa el cero hasta

114
00:08:23,520 --> 00:08:24,800
el 30 por ciento.

115
00:08:25,110 --> 00:08:31,230
Entonces, lo que sucede aquí es que comenzamos nuestra animación en cero para la opacidad y luego hasta el

116
00:08:31,230 --> 00:08:32,220
10 por ciento.

117
00:08:32,370 --> 00:08:34,260
Dejamos que se desvanezca en el espacio.

118
00:08:34,290 --> 00:08:41,580
Cuando dejamos la opacidad en uno hasta el 20 por ciento y luego la encontramos nuevamente en cero

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

120
00:08:43,110 --> 00:08:50,040
animación de la propiedad configurada para facilitar el paso de 0 a 10 y luego también tiende a disminuir.

121
00:08:50,040 --> 00:08:53,100
También notará que tenemos la función de sincronización de

122
00:08:53,160 --> 00:08:58,030
Así que esto nos da una transición más suave ya que Faden de 0 a 1.

123
00:08:58,920 --> 00:09:02,200
Entonces, puede que se pregunten de dónde sacamos estos porcentajes.

124
00:09:02,400 --> 00:09:08,840
Así que seguí y creé un gráfico de la animación para ayudarlo a visualizar mejor lo que está sucediendo aquí.

125
00:09:09,840 --> 00:09:16,020
Entonces, básicamente, tenemos una imagen que se animará de cero segundos a 10 segundos y luego la segunda

126
00:09:16,020 --> 00:09:17,880
imagen pasará de 10 a 20.

127
00:09:17,880 --> 00:09:25,510
El tercero de 20 a 30 y luego de 30 a 40 y luego de 40 a 50 formando cinco imágenes a 10 segundos cada una.

128
00:09:25,740 --> 00:09:32,340
la opacidad de uno y luego de 10 segundos a 15 segundos se desvanecen en la siguiente imagen.

129
00:09:32,340 --> 00:09:40,000
Entonces, de cero segundos a 10 segundos tenemos un Faden de cinco segundos y luego la imagen permanece desteñida a

130
00:09:40,260 --> 00:09:47,330
Así que esto puede ser representado por Azul, que se desvanece en rojo, que es Sollen y luego se desvanece, que es anaranjado.

131
00:09:47,700 --> 00:09:54,810
Así que la primera imagen va del 0 al 10 por ciento y está desapareciendo de cero segundos a cinco

132
00:09:54,810 --> 00:09:59,250
segundos y se mantiene sólida del 10 por ciento al 20 por ciento.

133
00:09:59,250 --> 00:10:03,330
Así que como vemos tenemos del 10 al 20 por ciento de pasty one pasty one.

134
00:10:03,570 --> 00:10:08,920
Y luego, del 20 al 30 por ciento, en realidad está desapareciendo de una a cero.

135
00:10:09,270 --> 00:10:16,200
Y a medida que eso ocurra, la siguiente imagen cuya animación ya ha comenzado en 10 segundos va a estar

136
00:10:16,290 --> 00:10:18,870
en cero a uno, de 10 a 15.

137
00:10:18,870 --> 00:10:22,070
Y eso se superpondrá aquí creando este efecto de fundido cruzado.

138
00:10:22,290 --> 00:10:27,510
Así que esto se mantiene sólido durante cinco segundos y luego tenemos otra superposición, ya que se desvanece

139
00:10:27,510 --> 00:10:34,990
y la siguiente imagen se desvanece y el mismo patrón se repite hasta que lleguemos a 50 segundos, que es el final de nuestra animación.

140
00:10:35,040 --> 00:10:36,630
Esta imagen es sólida.

141
00:10:36,840 --> 00:10:42,200
Y luego volvemos al principio, donde la imagen original se desvanece cuando la

142
00:10:42,210 --> 00:10:47,300
quinta imagen se desvanece y luego comienza todo de nuevo y gira infinitamente.

143
00:10:47,340 --> 00:10:51,910
Así que sigamos y guardemos nuestro US y abramos la cámara web.

144
00:10:52,020 --> 00:10:56,380
Asegúrese de que sus servidores se estén ejecutando y actualizando, y podremos ver la animación en vivo.

145
00:11:02,590 --> 00:11:07,530
Así que esta imagen es visible durante cinco segundos y ahora va a desaparecer a medida que la siguiente imagen se desvanece.

146
00:11:07,630 --> 00:11:09,450
Entonces esa es una transición de cinco segundos.

147
00:11:09,550 --> 00:11:13,870
Tenemos cinco segundos más de esta foto y luego se desvanecerá en la siguiente.

148
00:11:16,550 --> 00:11:22,070
Entonces, lo último que desea hacer es asegurarse de que nuestro control deslizante de fondo funcione en todos los navegadores.

149
00:11:22,190 --> 00:11:29,420
Así que de vuelta al tutorial aquí y en la parte inferior, tengo esta regla aquí o la copio.

150
00:11:29,420 --> 00:11:31,380
Devuélvelo a tu éxito.

151
00:11:31,440 --> 00:11:38,540
sin CSSA. Klowns fue agregado por modernizador y ya teníamos el CD de modernizadores y aquí

152
00:11:38,540 --> 00:11:45,680
mismo si quieres saber cómo encontré que solo busqué up modernizador CDR y elegí el primero.

153
00:11:45,680 --> 00:11:54,600
Pégalo en la parte inferior y verás que tengo esta coma, dice que los navegadores más antiguos admiten las animaciones

154
00:11:55,760 --> 00:12:02,420
Así que acabo de copiar la versión del archivo y luego la agrego a una etiqueta de secuencia de comandos en

155
00:12:02,420 --> 00:12:08,270
el encabezado y establezco el script para que se sincronice, lo que hace que este javascript explote simultáneamente junto

156
00:12:08,270 --> 00:12:10,510
con los otros recursos en la página.

157
00:12:11,420 --> 00:12:16,330
Entonces, si volvemos al CSSA, podemos ver que solo tienen la capacidad establecida en 1.

158
00:12:16,340 --> 00:12:21,500
Entonces, lo que sucederá aquí es que los navegadores que no admitan la integración de sistemas solo

159
00:12:21,500 --> 00:12:25,250
tendrán una diapositiva visible y ese sería el fondo de esa imagen.

160
00:12:27,070 --> 00:12:30,390
Así que eso es todo para el control deslizante de la imagen de fondo de pantalla completa.

161
00:12:30,550 --> 00:12:33,640
Si tiene alguna pregunta al igual que ahora y veré el siguiente video.

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